flex布局

容器属性：

    1. flex-direction ：

        row  表示子元素沿主轴从左到右排列

        row-reverse  表示子元素沿主轴从右向左依次排列

        column  表示子元素沿交叉轴从上到下排列

        column-reverse  表示子元素沿交叉轴从下往上排列

    2. flex-wrap：

        wrap  换行

        nowrap  不换行

        wrap-reverse  表示置反换行的方向，比如按row 排列，wrap-reverse之后会沿着底部往上排列，按column之后，会沿着右边向左边排列

3. flex-flow：

row nowrap上面两个属性的复合属性

    4. justify-content：水平方向（主轴）上的对齐方式

flex-start  可以看成所有的子元素是一整块移动的，flex-start是所有子元素整体贴父元素的左边

flex-end  可以看成所有的子元素是一整块移动的，flex-end是所有的子元素整体贴父元素的右边

center  一整块元素居中显示

space-around  每行第一个和最后一个子元素各贴父元素的左边框和右边框，中间的间隙除了子元素的宽度，平分

space-between  每个子元素两侧的间隔相等。所以，子元素之间的间隔比子元素与父元素边框的间隔大一倍

5. align-items：垂直方向（交叉轴）上的对齐方式

        flex-start  贴最上面

        flex-end  贴最下面

        center  中间对齐

        baseline  第一行文本基线对齐

        stretch  默认值，如果子元素没有设置高度，默认占满父元素的高度

    6. align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

        flex-start  与交叉轴的起点对齐

        flex-end  与交叉轴的终点对齐

        center  与交叉轴的中点对齐      

        space-between  与交叉轴两端对齐，轴线之间的间隔平均分布

        space-around  每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

stretch  轴线占满整个交叉轴

元素属性：

1. order：  值是一个数字，默认是0。决定了每一项元素的排列顺序，数值越小，位置越靠前

2. flex-grow： 定义元素的放大比例，默认是0。放大的是父元素除子元素的大小外的剩余空间

3. flex-shrink： 定义元素的缩小比例，默认是1。即如果空间不足，设置了该属性的项目缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

4. flex-basis：定义了在分配多余空间之前，默认值是auto，即项目本来的大小。设置了该属性的项目占据的主轴空间（可以看做是宽度）。浏览器根据这个属性，计算主轴是否有多余空间。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

    5. flex：该属性是flex-grow、flex-shrink、flex-basis属性的简写（复合属性）。默认值是0 1 auto。后两个属性可选。

                该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

6. align-self：它允许单个项目跟其他项目有不一样的对齐方式，可以覆盖align-items属性，默认值是auto，表示继承父亲的items属性，如果没有父元素，则等同于stretch（占满父元素的高）。