Css3响应布局 弹性盒子

弹性盒子（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