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