FlexBox总结
Flex 布局有两种属性: 容器属性/项目属性
容器属性
flex-direction 主轴方向
取值:
-
row: 水平, 默认
-
row-reverse: 水平, 从右往左
-
column: 垂直
-
column: 垂直, 从下往上
flex-wrap 项目换行
取值
-
nowrap: 不换行, 默认
-
wrap: 换行
-
wrap-reverse: 反向换行, 表现得与
align-items设置为flex-end类似
当启用换行时, 每一行都有一个主轴
flex-flow 主轴方向和项目换行的简写
flex-flow: <flex-direction> <flex-wrap>;
justify-content 主轴对齐方式
取值
-
flex-start: 主轴开头, 默认
-
flex-end: 主轴末尾
-
center: 主轴中心
-
space-between: 两侧无间距, 项目之间间距相同
-
space-around: 两侧间距较小, 项目之间间距相同
align-items 交叉轴对齐方式
取值
-
flex-start: 交叉轴开头, 默认
-
flex-end: 交叉轴末尾
-
center: 交叉轴中心
-
stretch: 拉伸到可用宽度
-
baseline: 基线对齐
align-content 多行交叉轴对齐方式
取值
-
flex-start: 交叉轴开头, 默认
-
flex-end: 交叉轴末尾
-
center: 交叉轴中心
-
stretch: 拉伸到可用宽度
-
space-between: 两侧无间距, 项目之间间距相同
-
space-around: 两侧间距较小, 项目之间间距相同
注意点:
-
如果启用换行, 那么
align-content生效, 否则无效 -
如果启用换行, 只有
align-content为stretch时,align-items才会生效
项目属性
order 项目顺序
order 项目排列顺序
取值：整数，越小越靠前，默认为 0。
flex-grow 项目放大比例
取值：数字，默认为 0。
flex-shrink 项目收缩比例
取值：数字，默认为 1。
flex-basis 项目占据主轴的空间大小
取值：
-
默认值: 自适应空间
-
固定尺寸(如 100px)
flex 简写属性
设置flex-grow、flex-shrink和flex-basis三个属性的值。默认值为0 1 auto。
align-self 指定单个项目在交叉轴上的对齐方式
取值：与align-items取值相同（但会覆盖其），也包括其余有效的 CSS 属性值（justify-content, align-content 等）
取值: 数字, 默认为 0
项目按照数字从小到大排序
flex-grow 项目的增长比例
取值: 数字, 默认为 0
项目如何占据剩余可用空间, 设置为 0 不占用
flex-shrink 项目的缩小比例
取值: 数字, 默认为 1