弹性盒子 布局

任何一个容器都可以指定为 Flex 布局，

设为 Flex 布局以后，子元素的 float 、clear、和 vertical-algin属性都将失效！！！

属性容器：

1.flex-direction: 决定主轴的方向(排列方向row、row-reverse、column、column-reverse)

        row:水平方向，起点在左端;
        row-reverse:水平方向，起点在右端;
        column:垂直方向，起点在上沿;
        column-reverse:垂直方向，起点在下沿;

2.flex-wrap:规定如果一条轴线排不下，如何换行(nowrap、wrap、wrap-reverse)

        nowrap:不换行(默认)；

        wrap:换行，第一行在上方；

        wrap-reverse:换行，第一行在下方；

3.flex-flow:是flex-direction属性和flex-wrap属性的简写，默认值为 row/nowrap

4.justify-content:定义了项目在主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around）

        flex-start:左对齐(默认);

        flex-end:右对齐;

        center:居中;

        space-between:两端对齐，项目之间间距相等;

        space-around:每个项目两端的间距相等，所以项目之间的间隔比项目与边框的间距大一倍;

5.align-items:定义了项目在交叉轴上如何对齐（flex-start、flex-end、center、space-between、space-around、stretch）

        flex-start：交叉轴的起点对齐；
        flex-end：交叉轴的终点对齐；
        center：与交叉轴的中点对齐；
        space-between：与交叉轴两端对齐，轴线之间的间隔平均分布；
        space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍；
        stretch（默认值）：轴线占满整个交叉轴。

6.align-content:定义了多根轴线的对齐方式