1、什么是弹性盒？
弹性盒可以根据某些子元素设置的宽度或者高度自动为其他的子元素设置宽和高。
2、将元素设置为弹性盒
display ：flex 将此属性设置在父元素上 默认主轴方向是水平轴
3、分配父元素剩余的空间
-webkit-flex-grow ：整数（子元素上） 整数表示占父类剩余空间的份数
如果主轴是水平轴 那么该属性分配的是宽
如果主轴是垂直轴 那么该属性分配的是高
4、设置主轴的方向（父元素上）
-webkit-flex-direction ：row | row--reverse | column | column--reverse 默认值是row
row 水平排列 从左到右 row--reverse 从右到左
column 垂直排列 从上到下 column--reverse 从下到上
5、设置子元素在侧轴上的对齐方式（父元素上）
-webkit-align-items ：flex--start | flex--end | center
flex--start 侧轴的起始位置 center 居中
flex--end 侧轴上的结束位置
6、设置子元素在主轴的对齐（父元素上）
-webkit-justify-content ：flex--start | flex--end | center | space--around | space--between
flex--start ：主轴起始位置
flex--end ：主轴结束位置
center ：居中
space--around ：子元素与两端的距离是子元素与子元素距离的一半
space--between ：子元素与两端的距离是0
