Flex布局

参考地址：阮一峰Flex布局语法篇

1、容器的属性

    1.1、flex-direction 主轴方向

        (row 默认值：横 | row-reverse：倒着横 | column：竖 | column-reverse：倒着竖)

    1.2、flex-wrap 是否换行

       (nowrap 默认值：不换 | wrap：换| wrap-reverse：换行，第一行在下面)

    1.3、flex-flow 主轴方向和换行简写

         (flex-direction || flex-wrap)

    1.4、justify-content 主轴对齐方式

         (flex-start 默认值：| flex-end | center | space-between 两端对齐，轴间隔平分 | space-around 每根轴两侧间隔相等)

    1.5、align-items  交叉轴上对齐方式(纵向对齐方式)

       (flex-start | flex-end | center | baseline 文字基线 | stretch 默认值:占满)

    1.6、align-content 多根轴线（多行）的对齐方式

       (flex-start | flex-end | center | space-between | space-around | stretch 默认值:占满)

2、项目属性

    2.1、order 排序值;默认0，从小到大排序。

    2.2、flex-grow 项目放大比例;

          默认0：不放大。

          都为1：等分剩余空间。

          2~N：数值越大，剩余空间分成比例越高。

    2.3、flex-shrink  项目缩小比例;

          默认1：空间不足将缩小。

          都为1：都等比例缩小。

          一个为0,其他为1：前者不缩小。

          负值无效(等同默认值)

          2~N：数值越大缩的比例越多。

    2.4、flex-basis 在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。

           默认值auto:项目本身大小。

    2.5、flex

          flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

          两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

    2.6、align-self 单个项目有与其他项目不一样的对齐方式，

         (auto | flex-start | flex-end | center | baseline | stretch)

          可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。