弹性盒子（flexbox）组成：弹性容器（Flex container）和弹性子元素（Flex item）<1>弹性容器（Flex container）：
display:flex|inline-flex;
内部包含一个或多个弹性子元素
注意：设置为弹性容器后，子元素的float/clear/vertical-align属性将失效
属性
1.flex-direction :用来指定子元素的主轴方向
属性值：row | row-reverse | column | column-reverse;
默认值为：row
设置主轴的方向--row为水平方向作为主轴*
flex-direction:row;
设置主轴的方向--column为垂直方向作为主轴
flex-direction:column;*
2. flex-wrap
指定子元素是否换行
属性值：nowrap | wrap | wrap-reverse
默认为：nowrap
3.flex-flow 以上两个属性的缩写
4.justify-content
用于指定主轴上对齐伸缩项目方式
属性值：flex-start | flex-end | center | space-between | space-around
5.align-items
用于指定侧轴上对齐伸缩项目方式
属性值：flex-start | flex-end | center | baseline | stretch
stretch为拉伸，当子元素高度为auto时，所有子元素会拉伸为同行最大高度。
6align-content
设定侧轴上多根轴线的对齐方式
属性值：flex-start | flex-end | center | space-between | space-around | stretch
<2>弹性子元素（Flex item）
属性：
1.order
项目流排列顺序
属性值：数值（数值越小排在越前面）
2.flex-grow
项目扩大比例，子元素将完全占用容器可用空间
属性值：数值，取负值无效
3.flex-shrink
项目缩小比例，空间不足时，子元素将等比缩小
属性值：数值，取负值无效
4.flex-basis
设置子元素占据主轴的空间
分配容器空间
5.flex
flex-grow，flex-shrink和flex-basis三个属性的缩写
第二个和第三个属性值可选
6.align-self
覆盖默认的对齐方式
属性值：auto | flex-start | flex-end | center | baseline | stretch