1. 基本概念

flex 是一种新的布局方式。

偷懒没画图，网上盗了一张

1.1 轴：

• 主轴（main axis）
• 侧轴（cross axis）

默认情况下，主轴为水平方向的轴，侧轴为垂直方向的轴；
但主轴、侧轴与方向无关，因为通过修改 flex-direction 属性，可以改变主轴、侧轴的方向。

1.2 主轴：起点、终点

• 主轴起点（main start）
• 主轴终点（main end）

主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end

1.3 侧轴：起点、终点

• 侧轴起点（cross start）
• 侧轴终点（cross end）

侧轴的开始位置叫做 cross start，结束位置叫做 cross end。

1.4 尺寸：

• 主轴尺寸（main size）
• 侧轴尺寸（cross size）

flex 子元素的宽叫做 main size，高叫做 cross size。

2. flex 容器属性

启动 flex 布局，修改容器本身 display 属性值为 flex 即可：display: flex;

2.1 flex-direction 主轴方向

• row（默认值）：主轴为水平方向，起点在左
• row-reverse：主轴为水平方向，起点在右
• column：主轴为垂直方向，起点在上
• column-reverse：主轴为垂直方向，起点在下

2.2 flex-wrap 换行

• nowrap（默认）：不换行
• wrap：换行，第一行在上方
• wrap-reverse：换行，第一行在下方

2.3 flex-flow 缩写

• row nowrap（默认值）
• 是 flex-direction flex-wrap 这两个属性的缩写

2.4 justify-content 主轴方向的对齐方式

• flex-start（默认值）：主轴起点对齐
• flex-end：主轴终点对齐
• center：主轴居中对齐
• space-between：两端对齐，flex 子元素之间的间隔都相等（空间放中间）
• space-around：每个 flex 子元素两侧的间隔相等（空间放周围）

2.5 align-items 侧轴方向的对其方式

• stretch（默认值）：若 flex 子元素未设置高度或设为auto，将占满整个容器的高度。
• flex-start：侧轴起点对齐
• flex-end：侧轴终点对其
• center：侧轴居中对其
• baseline：flex 子元素第一行文字的基线对齐。

2.6 align-content 多行、列内容对其方式（用的较少，多个侧轴）

• stretch（默认）：伸展占满侧轴
• flex-start：侧轴起点对齐
• flex-end：侧轴终点对其
• center：侧轴居中对其
• space-between：两端对齐，flex 子元素之间的间隔都相等（空间放中间）
• space-around：每个 flex 子元素两侧的间隔相等（空间放周围）

3. flex 子元素属性

3.1 flex-grow 增长比例（空间过多时）

• 子元素的增长比例，默认为 0，即不会增长

3.2 flex-shrink 收缩比例（空间不够时）

• 子元素的收缩比例，默认为 1

3.3 flex-basis 默认大小（一般不用）

• 定义在分配多余空间之前，flex 子元素占据 main axis 空间（默认所占空间大小）

3.4 flex 缩写

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

3.5 order 顺序（可代替双飞翼）

• 定义子元素的排列顺序

3.6 align-self 自身的对其方式

• 定义子元素自身的对其方式

小注：后续更新配图 + 实战例子

---

参考：阮一峰教程