flex布局实现多个盒⼦平均分布并换⾏（五个盒⼦三个⼀⾏另外两个换⾏靠左对
齐显⽰）
项⽬中常常遇见有好多的内容会让我们⽤图⽚的形式进⾏展⽰，但是有的时候因为⽤了flex可能会忘记⼀些细节，
加⼊台后返回5条数据，我们展⽰⼀⾏只能3个，剩下两个要换⾏ 并且要靠左，还要有间距
看看图
⾥⾯的就⾃⼰慢慢画吧，
flex布局对齐方式这个⾥⾯写的是死的，到时候肯定是后台返回数据展⽰
代码
<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。