弹性盒子：是一种新布局属性，让元素有能力控制子元素排列

语法：display:flex|inline-flex；
注：变成弹性盒子后，里面项目就有了其他属性，可以在容器里拉伸或收缩，改变排列顺序与方式

容器身上的属性

1. 设置主轴的方向flex-direction:row|column|row-reverse|column-reverse;
   

2. 设置项目在主轴上的排列方式
   justify-content:flex-start|flex-end|center|space-around|space-between|space-evenly均匀分隔
   注：around在盒子之间间隔是盒子与屏幕边框间隔的两倍，between盒子与屏幕边框没间隔间隔全在盒子之间，evenly盒子与屏幕盒子与盒子之间间隔一样
   

3. 设置项目是否换行
   flex-wrap:nowrap|wrap|wrap-reverse

4. 项目在侧轴上的对齐方式
   align-items:stretch拉伸|flex-start|flex-end|center|baseline基线
   注：stretch在项目有高度时候，项目不会有拉伸效果
   注：该属性对应侧轴只有一根轴线

5. 设置多根横轴线排列方式
align-content:streth|flex-start|flex-end|center|space-around|space-between|space-evenly；
6. 设置主轴方向和是否换行的复合属性
flex-flow:flex-direction flex-wrap;

项目身上的属性

1. 项目是否缩小flex-shrink:1;会缩小|0 不缩小
   注：数字缩小值，除以所有项目值，乘以数字
2. 是否放大flex-grow:1;会放大|0 不放大
   注：设置后项目会自己放大填充多余空间
3. 项目尺寸flex-basis:auto|*px;
4. 放缩复合属性flex:flex-grow flex-shrink flex-basis;
   注：flex:1;代表1 1 auto
5. 项目的排序order:数字；
   注：元素默认值是0；按从小到大排列
6. 设置项目单独对齐方式align-self:strech拉伸|flex-start|flex-end|center|baseline;
   注：该属性加在项目上，也就是子元素身上