flex布局的几种常用布局方式代码

    <style>
        * {
            padding: 0;
            margin: 0
        }

        .big-box {
            background-color: olivedrab;
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap //一行装不了换行
        }

        .big-box .a,.b,.c {
            width: 80px;
            height: 100px;
            background-color: bisque;

        }
    </style>

    <div class="big-box">
        <div class="a">12</div>
        <div class="b">34</div>
        <div class="c">56</div>
    </div>

此种布局为小盒子之间的距离是两边的两倍，用于商品列表等布局

justify-content: space-around

justify-content: space-evenly;

justify-content：center

justify-content: space-between;

justify-content: space-evenly

.box{
    align-items: flex-start | flex-end | center | baseline | stretch;
}