弹性盒子 display:flex

1.flex-direction：设置主轴的方向。

        row        默认值从左到右

        row-reverse        从右到左

        column        从上到下

        column-reverse        从上到下

2.justify-content 设置主轴上的子元素排列方式

        flex-start        默认值从头部开始如果主轴是x轴，从左到右

        flex-end        从尾部开始排列

        center        在主轴居中对齐(如果主轴是x轴则水平居中)

        space-around       平分剩余空间

         space-between        先两边贴边 再平分剩余空间(重要)

3.flex-wrap设置子元素是否换行

        nowrap        默认值，不换行

        wrap        换行

4.align-items 设置侧轴上的子元素排列方式(单行/不换行)

        flex-start        从上到下

        flex-end        从上到下

        center        挤在一起（垂直居中）

        stretch        拉伸（默认值）

5.align-content 设置侧轴上的子元素的排列方式(多行/有换行)

        flex-start        默认值在测轴的头部开始排列

        flex-end        在侧轴的尾部开始排列

        center        在侧轴中间显示

        space-around        子项在侧轴平分剩余空间

        space-between        子项在侧轴先分布在两头，在平分剩余空间

        stretch        设置子项元素高度平分父元素高度