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 自身的对其方式
- 定义子元素自身的对其方式
小注：后续更新配图 + 实战例子
参考：阮一峰教程
