弹性盒

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