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 自身的对其方式

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

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

参考：阮一峰教程

flex 布局