Flex 弹性布局
- 主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；
- 交叉轴：与主轴垂直的另一方向，称为交叉轴。
flex-direction：控制弹性布局中元素的方向
- row：行(默认)
- row-reverse：行反转
- column：列
- column-reverse：列反转
flex-wrap：元素是否换行
- nowrap：不换行(默认)
- wrap：换行
以上简写：flex-flow: flex-direction flex-wrap;
元素间的对齐和空间分配
align-items — y 轴，垂直方向
- stretch：填充垂直方向的空间（默认）
- flex-start：贴着容器顶部
- flex-end：贴着容器底部
- center：上下居中
justify-content — x 轴，水平方向
- stretch：默认靠边，有多少放多少
- flex-start：贴着容器左边
- flex-end：贴着容器右边
- center：水平居中
- space-around：四周所占的空白面积相等（每个 div）
- space-between：贴边的两个一边不分配空间，其余与 space-around 相同
flex：flex-grow flex-shrink flex-basis
- flex-grow：正数：扩大所占空间(为 1:用宽度将剩余的空间占领;为 0:不扩大空间)
- flex-shrink：正数：缩小所占空间，只有在元素总和超出主轴才生效(为 0 不缩小)
- flex-basis：元素的空间大小，默认 auto
align-self：只能作用单个项目并对齐当前 flex | grid 行中的元素。
注：align-self 属性不适用于块类型的盒模型和表格单元。如果任何 flexbox 元素的侧轴方向 margin：auto，则会忽略 align-self。
- flex-end：flex 元素会对齐到交叉轴的尾端。(搭配选择器，可以实现奇偶交错排列)
- flex-start：flex 元素会对齐到交叉轴的首端。
- center：元素尺寸大于 flex 元素尺寸，在两个方向均等溢出
- 不常用不介绍
连续字段换行（看 mdn 文档）
- word-break: break-all; ：出现连续的单词或字段时，使用可换行
