flexbox

flexbox

flexbox布局是伸缩容器（container）和伸缩项目组成（item）布局的主题思想是元素可以改变大小以适应可用空间

伸缩容器的属性

• display

• flex 块级伸缩容器

• inline-flex 行内伸缩容器

• flex-direction

• 指定主轴方向

• row 水平 从左到右

• column 垂直 从上到下

• row-reverse 水平从右到左

• column 垂直从下到上

• flex-warp

• 伸缩容器主轴方向空间不足的时候 是否换行 该如何换行

• nowarp 默认值 不会换行 自动缩放

• wrap 自动换行 主轴方向

• warp-reverse 自动换行 主轴反向

• flex-flow

• 2和3的综合

• flex-flow : row nowrap

• justify-content

• 用来定义伸缩项目在主轴线的伸缩方式

• flex-start 主轴线起始方向对齐 默认值

• flex-end 主轴线结束位置对齐

• center 主轴方向居中

• space-between 伸缩项目平均分布在主轴线上

• space-around 伸缩项目平均分布在主轴线上，两边保留一半空间

• align-items

• 用来定义伸缩项目在交叉轴上的对齐方式

• flex-start 交叉轴起始方向对齐 默认值

• flex-end 交叉轴结束位置对齐

• center 交叉轴向居中

• baseline 伸缩项目根据基准线对齐（楼梯）

• strech 伸缩项目拉伸填充

• align-content

• 伸缩项目出现换行后在交叉轴上的对齐方式

• flex-start 交叉轴起始方向

• flex-end 交叉轴结束方向

• center 交叉轴中兴

• space-between 平分交叉轴

• space-around 平分交叉轴 交叉轴两边留有一半空间

• strech 默认值

伸缩项目的属性

• order

• 定义项目排列顺序 数值越小 排列越靠前 默认值是0 order：0

• flex-grow

• 主轴方向有剩余空间时

• 定义伸缩项目的放大比例 默认值0 表示存在剩余空间也不放大

• flex-shrink

• 主轴方向空间不足时

• 定义伸缩项目的收缩能力 默认值为1 flex-shrink:1

• flex-basis

• 用来设置伸缩项目的基准值 剩余空间按比例进行伸缩

• flex-basis：length

• flex-basis： auto 默认值

• flex

• flex-grow flex-shrink flex-basis三个属性的缩写，

• 其与语法 flex:none

• flex-grow flex-shrik flex-basis 其中第二个和第三个参数为可选值

• 默认值 0 1 auto

• algin-self

• 用来设置单独伸缩项目在交叉轴的对齐方式，会覆盖默认的对齐方式

• auto

• flex-start 交叉轴起始方向

• flex-end 交叉轴结束方向

• center 交叉轴中心

• baseline 交叉轴上的基准线对齐

• stretch 交叉轴方向占满伸缩容器 （交叉轴为垂直方向的话，只有在不设置高度情况下 起作用）