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

项目中常常遇见有好多的内容会让我们用图片的形式进行展示，但是有的时候因为用了flex可能会忘记一些细节，
加入台后返回5条数据，我们展示一行只能3个，剩下两个要换行 并且要靠左，还要有间距
看看图

里面的就自己慢慢画吧，

这个里面写的是死的，到时候肯定是后台返回数据展示
代码

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

<style lang="scss">
.analysisTask{
   .chartListUl{
        display: flex;
        justify-content: space-between;// space-between：两端对齐，子元素间隔相等 space-around：子元素两侧的间隔相等。
        flex-wrap: wrap; //  wrap（向下换）
        li{
            width: 32%;// 给子元素定宽
            height: 300px; // height: calc(100% - 40px); 用calc 用的会比较多。
            margin-top: 20px;
            border-radius: 5px;
            box-shadow:1px 2px 3px 3px #e2e1e1;   
        }
    }
    .chartListUl:after{  // 使用伪类元素占据单位，不影响页面
        content: "";
        height: 0;
        width: 32%;
    }
}
</style>