Flex 布局：意为“弹性布局/弹性盒子模型”
弹性盒子模型：由弹性容器（父元素）和 弹性项目（子元素）组成
如果父元素设置为弹性容器后，子元素自然变成弹性项目，弹性项目会按照弹性盒模型的规则去布局。
弹性布局默认规则
弹性项目默认从左到右排列（水平）
主轴：项目的排列方向（默认水平 从左到右）
侧轴：默认垂直方向，如果主轴为垂直方向，那么侧轴就水平方向弹性项目默认在同一行排列，默认会被挤压
父元素设置为弹性容器之后，那么子元素在侧轴方向是有值的（width 或者 height）
默认为父元素的宽或者高，子元素主轴方向一定要设置值
给弹性容器（父元素）设置的属性
display:flex——把元素设置为弹性容器
flex-direction——改变主轴方向
取值：
- row——水平从左从右
- row-reverse——水平从右到左
- column——垂直从上到下
- colunm-reverse——垂直从下到上
- justify-content——主轴对齐方式
取值：
- flex-start——主轴的起点对齐
- flex-end——主轴的末端对齐
- center——主轴中间对齐
- space-between——两端对齐，把多余的空间分到项目与项目之间
- space-around——自动对齐，把多余的空间分到项目的两侧
- align-items——侧轴存在单行的情况，侧轴的对齐方式
取值：
- flex-start——侧轴的起点对齐
- center——侧轴的中间对齐
- flex-end——侧轴的末端对齐
- flex-wrap——设置子项目是否换行（第一行排列不下才会换行）
取值：
- wrap——换行
- nowrap——不换行，默认值
- wrap-reverse——反转换行
- align-content——侧轴存在多行情况，侧轴对齐方式
取值：
- flex-start——侧轴的起点对齐
- flex-end——侧轴末端对齐
- center——侧轴的居中对齐
- space-between——侧轴的两端对齐，多余的空间平分到行与行之间
- space-around——自动对齐，把多余的空间平分到行的上下两侧
弹性盒模型给子项目设置的属性
- align-self——单个子元素在侧轴的对齐方式
取值：
- flex-start——侧轴的起点对齐
- flex-end——侧轴的末端对齐
- center——居中对齐
- auto——默认值，当元素有 align-items 属性的时候，那么 align-self 会继承 align-items 的属性值，如果没有的时候，那么 auto 为 stretch(拉伸)
- stretch——拉伸，会拉伸至父元素的宽度，或者高度
order——设置子元素的排列顺序
order:number(没有单位)，默认值 0，值越大，越后面flex——设置子元素所占等份
flex-grow——设置子项目的放大比例（把剩余空间分等份）
所有子项目的 flex-grow 属性的属性值总和为 number 把剩余的部分，分为 number 份
li:nth-chil(1){flex-grow:1} //占剩余的部分的 1 份flex-shrink——设置子项目的压缩比例
取值：number（没有单位），默认值为 1（所以元素默认 1:1 压缩）
如果值为 0 表子项目不压缩flex-basis——设置子元素在主轴方向所占据的空间相当于设置宽高