盒子模型常用排列方式

 /* 父盒子常见属性 */
        
        .父元素 {
            display: flex;
            /* 设置主轴方向 flex-direction:row(从左到右（默认）)/row-reverse(从右到左)/column(从上到下)/column-reverse(从下到上)*/
            flex-direction: row;
            /* 设置主轴上子元素的排列方式 
            justify-content:flex-start(默认，从头部开始)/flex-end(从尾部开始)/center(在主轴居中)/space-around(平分剩余空间)/space-between(先两边贴边，再平分剩余空间) */
            justify-content: center;
            /* 设置子元素是否换行 默认不换
            flex-wrap:nowrap(不换行)/wrap(换行) */
            flex-wrap: wrap;
            /* 设置侧轴单行子元素排列方式 
            align-items:flex-start(从头部开始)/flex-end(从尾部开始)/center(居中)/strech(默认，拉伸，即子盒子不给高度时会拉得和父盒子一样高) */
            align-items: start;
            /* 设置侧轴多行子元素排列方式
            align-content:flex-start/flex-end/center/space-around(子项在侧轴平分剩余空间)/space-between(先两边贴边，再平分剩余空间)/strech */
            align-content: center;
            /* 复合写法：
                flex-flow: flex-direction flex-wrap*/
            height: 200px;
            background-color: pink;
        }