五个盒子

   <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>