伸缩布局

flex Container 伸缩容器（外层div）

        main axis 主轴，横向的轴，x轴，起点和终点之间的距离就是宽度

        cross axis 侧轴，纵向的轴，y轴，起点和终点之间的距离就是高度

        flex item 伸缩项目，父亲盒子里面的子元素（内层div）

flex-direction方向

      横向对齐方式

        row：默认,左对齐

        row-reverse： 对齐方式与row相反。 （右对齐）

        纵向对齐方式

        column： 从上往下排列（顶对齐）。

        column-reverse： 对齐方式与column相反。 （底部对齐）

justify-content 子元素在主轴（横轴）方向上的对齐方式

        flex-start： 默认值，起始位置对齐（左对齐）

        flex-end： 结束位置对齐（右对齐）

        center： 中间位置对齐（居中）

        space-between： 平均地分布在行里（两边抵拢，中间平均分配间隙）

        space-around： 平均地分布在行里（每一个子元素平均分配间隙）

align-items 子元素在侧轴（纵轴）方向上的对齐方式

        flex-start： 顶部对齐。

        flex-end： 底部对齐。

        center： 垂直居中。

        baseline： 文本的底部的基线对齐。

        stretch： 默认，拉伸对齐，属性值为'auto'

   align-content 侧轴的内容对齐方式

        flex-start： 内容顶对齐

        flex-end： 底部对齐

        center： 垂直居中

        space-between： 上下抵拢，中间平分

        space-around： 每个内容平分

        stretch： 拉伸，高度auto

order 子元素的排列顺序

        整数，数值小的排在前面。可以为负值

flex-grow 扩展比率，分配剩余空间(number)

align-self 子元素自身在侧轴的对齐方式

        auto： 默认自动

        flex-start： 顶部

        flex-end： 底部

        center： 居中

        baseline： 文字基线对齐。

        stretch：拉伸