Web弹性布局

                        /*弹性盒子 弹性布局 */
                        /* 默认从左到右 */
                display: flex;
                /* 从右到左 */
                /* flex-direction: row-reverse; */
                /* 从上到下 */
             /* flex-direction: column; */
             /* 从下到上 */
                /* flex-direction: column-reverse; */

            display: flex;
            /* 默认不换行 */
            
            /* 自动换行 ,warp第一行在最上面*/
            /* flex-wrap: wrap; */
            
             /* 自动换行 ,warp第一行在最下面*/ 
            flex-wrap: wrap-reverse;

            /* 对齐 */
            /* justify-content: flex-start; */
            
            /* 右对齐 */
            /* justify-content: flex-end; */
            
            /* 居中对其 */
            /* justify-content: center; */
            
            /* 两端对齐 */
            /* justify-content: space-between; */
            /* 间隔相同 */
            /* justify-content: space-around; */

            /* 默认 上端对齐 */
            
            /* 下端对齐 */
            /* align-items: flex-end; */
            /* 中间对齐 */
            align-items: center;

            /* 单独设置对齐方式 */
            align-self: flex-end;        

            /* 排序顺序  order越小越靠前*/
            order: 1;