9.弹性盒（flex）1.0

弹性盒是CSS3中新添加的一种布局方式，通过它可以更加方便的完成对网页的布局。通过弹性盒模型，可以便捷完成网页中的各种布局。

弹性容器：

        要使用弹性盒，必须先将元素设置为弹性容器，也就是要在那个元素里使用弹性盒，就把这个元素设置为弹性容器。

        通过

display:flex;    /*块级弹性容器*/
display:inline-flex;    /*行内级弹性容器*/

弹性项（弹性子元素）：

1. 弹性容器内的子元素就会自动变为弹性项。
2. 弹性子元素都会沿着弹性盒的主轴排列。

主轴：

        主轴就是弹性子元素的默认排列方向。

        通过flex-direction来设置弹性子元素的主轴方向。

flex-direction   设置主轴方向（就是弹性子元素排列的方向）
    可选值：
            row(默认值)             主轴为自左向右横向水平方向
            row-reverse            主轴为自右向左横向水平方向
            column                 主轴为自上向下纵向垂直方向
            column-reverse         主轴为自下向上纵向垂直方向

侧轴（辅轴）：

        侧轴就是与主轴垂直方向的轴。

flex-warp    设置元素是否自动换行
    可选值
        nowrap(默认值)    元素不换行
        wrap             元素换行
        wrap             元素反向换行

这两个可以通过flex-flow来简写，并且无顺序要求。

flex-flow:row nowrap;     ==     flex-flow:row;   
flex-flow:row wrap;       ==     flex-flow:wrap;
    ……

主轴方向上的元素对齐方式：

justify-content    设置元素在主轴上的对齐方式
    可选值：
    start(默认值)   元素从主轴的起点位置开始对齐。
    end             元素从主轴的结束位置开始对齐。
    center          元素沿主轴方向居中对齐。                     |===12345===|
    space-between   将主轴方向的空白位置分配到两个元素之间。      |1=2=3=4=5|
    space-around    将主轴方向的空白位置分配到每个元素周围。      |-1--2--3--4--5-|
    space-evenly    将主轴方向的空白位置分配到元素的一侧。         |*1*2*3*4*5*|

 侧轴上元素的对齐方式：

align-items    设置元素在辅轴上的对齐方式
    可选值：
           stretch(默认值) 元素在侧轴拉伸，将侧轴撑满
           start           元素从侧轴的起始位置开始对齐
           end             元素从侧轴的结束位置开始对齐
           center          元素在侧轴居中对齐



align-content       设置元素在侧轴上的空白空间分配。
    可选值：
           space-between       |1=2=3=4=5|

           space-around        |-1--2--3--4--5-|

           space-evenly        |*1*2*3*4*5*|