场景 :
无法确定flex 换行后列表个数又不固定,直接调试html特别麻烦,使用Grid布局
Grid布局天然有gap间隙,且天然格子对齐排布,因此,实现最后一行左对齐可以认为是天生的效果。
<div class="box">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
.box {
width: 200px;
display: grid;
justify-content: space-between;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 10px;
.list {
width: 100px; height:100px;
background-color: skyblue;
margin-top: 5px;
}
}
grid:
flex: