使用flex布局各个盒子平均分布（五个盒子中三个盒子占一行另两个换行靠左对齐）

  在做一些类似商城的项目中，我们会时常遇到类似 五个模块中三个模块占一行，另外外两个换到下一行靠左对齐这样的情况。下面我通过案例来实现以下这个效果：

效果图：

案例如下：

<template>
    <div class="test">
        <ul>
            <li v-for="(item,index) in list" :key="item+index"></li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list:[1,1,1,1]  // 根据数组条数控制有几个盒子
        }
    },
}
</script>
<style lang="less">
    .test {
        ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            text-decoration: none;
            li {
                margin-top: 10px;
                width: 32%;
                height: 100px;
                border: 1px solid #333333;
                background-color: skyblue;
            }
        }

        ul:after{  // 使用伪类元素占据单位，不影响页面
            content: "";
            height: 0;
            width: 32%;
        }
    }
</style>