flex布局实现多个盒子平均分布并换行（五个盒子三个一行另外两个换行靠左对齐显示）

很多项目布局都会用到多个盒子平均分布并换行，虽然有很多的方法，今天我们在这里用一下flex布局来实现一下，实现效果如下图：

<template>
   <div class="analysisTask">
         <ul class="chartList">
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
         </ul>
   </div>
</template>

<style lang="scss">
.analysisTask{
   .chartList{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li{
            width: 32%;
            height: 300px;
            margin-top: 20px;
            border-radius: 5px;
            box-shadow:1px 2px 3px 3px #e2e1e1;   
        }
    }
    .chartList:after{  // 使用伪类元素占据单位，不影响页面
        content: "";
        height: 0;
        width: 32%;
    }
}
</style>