一、弹性盒子的样式
1、弹性盒子
是一种布局方式，将父元素性质转成弹性容器，将子元素转成弹性元素
通过弹性容器来控制弹性元素的布局
2、弹性容器的6个样式
（1）**flex-direction: ;**控制弹性容器主侧轴方向
- 可选值
默认值row，主轴是水平，从左到右 ；侧轴是垂直，从上到下
**row-reverse，**主轴是水平，从右到左 ；侧轴是垂直，从上到下
column主轴是垂直方向，从上到下 ，侧轴是水平方向，从左到右
column-reverse 主轴是垂直方向，从下到上 ，侧轴是水平方向，从左到右
（2）justify-content: ; 控制弹性容器主轴上的对齐方式
- 可选值:
flex-start：从起点对齐 默认值
flex-end：从终点对齐
center: 居中对齐
space-between两端对齐
space-around 两端小，中间大
space-evenly 空白间距，平均分布在元素两侧
（3）align-items: ;控制弹性容器单行弹性元素侧轴的对齐方式
- 可选值：
flex-start 从起点对齐 默认值
center: 居中对齐
flex-end：从终点对齐
（4）flex-wrap: ;控制弹性元素是否换行
- 可选值：
nowrap不换行
wrap换行
wrap-reverse 换行并反转
（5）align-content: ;控制弹性容器侧轴多行的对齐方式
- 可选值:
flex-start：从起点对齐 默认值
flex-end：从终点对齐
center: 居中对齐
space-between 两端对齐
space-around 两端小，中间大
space-evenly 空白间距，平均分布在元素两侧
（6）flex-flow: ; 简写，同时设置主侧轴方向以及是否换行
css
flex-flow:row nowrap ;二、弹性元素的属性
1、order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2、flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
3、flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
4、flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，
即项目的本来大小。
5、flex：属性是flex-grow, flex-shrink 和 flex-basis的简写，
默认值为0 1 auto。后两个属性可选。
6、align-self：允许单个项目有与其他项目不一样的对齐方式，
可覆盖align-items属性。默认值为auto，
表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。