display: flex

 弹性盒的主轴默认为水平（从左到右）排列*/

           2. flex-direction设置主轴的方向

           取值（1）column 纵向排列，垂直排列

                （2）row(默认值)，在一行排列

                (3)row-reverse反向的水平排列

                （4）column-reverse 反向的垂直排列

       flex-direction: column-reverse;

 3.justify-content主轴的对齐方式

                取值：（1）center 居中

                        (2)flex-start  左对齐（默认值）

                        （3）flex-end 右对齐

                        （4）space-between  两端对齐

                        （5）space-around 自动分配多余的空间给子项目两边

            4.align-items侧轴对齐方式（单行）

                取值：（1）flex-start 顶端对齐

                        （2）flex-end 末端对齐

                        （3）center 居中对齐

                        （4）baseline 基线对齐

           align-items: center;

       }

/* 5.flex-wrap该属性控制flex容器是单行或者多行

                取值（1）wrap 换行

                (2)nowrap不换行

                (3)wrap-reverse反转的换行排列

            */

           flex-wrap: wrap-reverse;

        }

       li {

           /* flex: 25px;这种写法错误

                flex: 1;这个是正确写法

6.align-content  多行情况下，侧轴的对齐方式

                取值跟justify-content一样

           align-content: space-between;

       给子元素设置

               7. align-self子元素在侧轴反向的对齐方式

                auto                 默认值。元素继承了它的父容器的align-items 属性。如果没有父容器则            为 "stretch"。

                Stretch              元素被拉伸以适应容器。

                Center               元素位于容器的中心。

                flex-start           元素位于容器的开头。

                flex-end             元素位于容器的结尾。

 8.order：number

                number的数字越大，排在越后面，默认值为0