display: flex 写于父元素上
- 弹性盒子是为了适应所有类型的显示设备和显示大小
- 父元素叫伸缩容器，子元素叫伸缩项目
text-align在弹性盒子上不生效
flex-direction
- 写于父元素上
- 定义主轴方向（主轴是贯穿伸缩项目的轴，主轴会根据伸缩项目的方向而改变）
- 值：
row从左到右（默认值）
row-reverse从右到左
column从上到下
column-reverse从下到上
flex-wrap
- 写于父元素上
- 设置伸缩项目换行
- 值：
nowrap不换行（指定宽度无效，默认按比例换行）
wrap换行（仅对指定宽度超过伸缩容器时生效）
wrap-reverse反向换行（若竖向排列，则会从右侧开始向左侧排列；若横向排列，则会从下向上排列）
flex-flow
- 写于父元素上
- 设置伸缩项目方向+伸缩项目换行（可单独设置，设置顺序也可换）
- 例：
flex-flow: column wrap
justify-content
- 写于父元素上
- 设置主轴每行对齐方式
- 值：
flex-start伸缩项目向起始位置靠齐
flex-end伸缩项目向结束位置靠齐
center伸缩项目向中间位置靠齐
space-between两端的伸缩项目靠着父元素的两端，剩余的项目平均分配剩余空间
space-around将伸缩项目平均分配每行空间（两端仍保留空间）
align-items
- 写于父元素上
- 设置每行侧轴对齐方式（侧轴是垂直于主轴的轴）
- 值：
flex-start侧轴起点
flex-end侧轴终点
center侧轴中心
baseline根据伸缩项目的基线对齐
stretch伸缩项目拉伸填充整个伸缩容器
align-self
- 写于子元素上
- 与align-items用法相同，并可覆盖align-items
- 用于单独设置伸缩项目在伸缩容器中的侧轴对齐方式
align-content
- 写于父元素上
- 设置多个伸缩行的对齐方式（在整个父元素的高度中进行调整）
- 值：
flex-start 各行向伸缩容器的起点位置堆叠
flex-end各行向伸缩容器的终点位置堆叠
center各行向伸缩容器的中心位置堆叠
space-between 各行在伸缩容器中平均分布
space-around各行平均分布，两端保留空间
stretch各行伸展，占用剩余空间
order
- 写于子元素上
- 设置显示顺序，改变伸缩项目的排列顺序
- 值为数字，写几就排第几个，但是排在所有没标号的后面
- 例:
order:1
flex
- 写于子元素上
- 若想等宽或等高，可在每个子元素中设置
flex: 1 - 若想等比例显示，可在子元素上分别设置
flex: 1、flex: 2、flex: 3... - 0 1 auto为默认值（分别为flex-grow、flex-shrink、flex-basis）
flex-basis
- 写于子元素上
- 伸缩项目在主轴上占据的空间
- 值：
- auto （长度等于灵活项目的长度，默认值）
- 具体数值px/百分比 （规定灵活项目的初始长度）
flex-grow
- 写于子元素上
- 当伸缩容器有多余空间时，伸缩项目的放大比例
- 值：
- 0 不放大（默认）
- 整数 放大比例
flex-shrink
- 写于子元素上
- 当伸缩容器空间不足时，伸缩项目的缩小比例
- 值：
- 1 当空间不足时，自动缩小（默认）
- 整数 缩小比例
flex-grow和flex-shrink都是子元素设完宽高后，页面中剩余的空间按比例进行分配。基本值就是固定的宽或高（若主轴为纵向，则设置的为高；若主轴为横向，则设置的为宽）
