flex布局

一，容器
    1，flex-direction（主轴方向）

        row 从左到右
        row-reverse从右到左
        column  主轴为垂直方向，从上到下
        column-reverse从下到上
    2，flex-wrap换行

        nowrap 不换行
        wrap 第一行在上方
        wrap-reverse第一行在下方
    3，flex-flow是flex-ddirection和flex-wrap的简写形式，默认是row nowrap
    4,justify-content 主轴对其方式

        flex-start 顺着主轴方向
        flex-end逆着主轴方向
        center居中对其
        space-between 两端对齐
        space-around  元素两端等间隔（距离边界一倍距离，元素间两倍）
    5，align-iteems 交叉轴对齐方式

          flex-start 顺着交叉轴方向
        flex-end逆着交叉轴方向
        center居中对其
        baseline第一行文字的基线对齐
        stretch默认（自动填充整个交叉轴的长度） 
 6，align-content 多轴线

        flex-start 顺着主轴方向
        flex-end逆着主轴方向
        center居中对其
        space-between 两端对齐
        space-around  元素两端等间隔（距离边界一倍距离，元素间两倍）
二，元素属性
    1，order定义排列顺序

    2，flex-grow放大比例

    3，flex-shrink缩小比例

    4， flex-basis占据主轴的长度（即容器的长度）
    5，flex(flex-grow flex-shrink flex-basis)简写模式默认 0 1 auto
（该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

    6，align-self自定义对齐方式（交叉轴）