Flex布局

body {

　　　 display: flex;
            /* flex-direction: row;              表示项目在交叉轴的排列方式
            flex-wrap: wrap-reverse; */
            flex-flow: row wrap-reverse;

}

 body {
            margin: 0px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;       /*表示项目在主轴的排列方式*/
        }

body {
            display: flex;
            flex-direction: column-reverse;     /*表示主轴的方向(从下至上)*/
        }

.box {
            display: flex;

　　　　/*用来适配webkit内容的浏览器*/

　　　　display:-webkit-flex

}

Flex布局

原文：https://www.cnblogs.com/wskb/p/12306447.html