使用flex布局兩端對齊，但是最后一行元素居中會很丑，所以可以讓最后一行元素左對齊，方法如下：
改之前：
html:
<div class="list-box">
<div class="item" v-for="item in moreList" :key="item.id" >
...
/div>
</div>?css:
.list-box{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item{
width:19%
}
只需要添加幾行代碼：其中的數(shù)字取決于你的列表每行有幾個元素，以我的為例(寬度是百分比)，每行有五個元素，最后剩下的一行可能是4個、3個、2個。19%、38%、57%是還缺幾個元素就是滿元素的個數(shù)*元素的寬度，5%、10%、15%是還缺幾個元素就是滿元素的個數(shù)*你每行元素有幾個，如果是4個的話就是4%、8%、12%。4的意思是5個元素有四個間距，如果是4個元素的話就是3。
/* 如果最后一行是4個元素 */
.item:last-child:nth-child(5n - 1) {
margin-right: calc(19% + 5% / 4);
}
/* 如果最后一行是3個元素 */
.item:last-child:nth-child(5n - 2) {
margin-right: calc(38% + 10% / 4);
}
/* 如果最后一行是2個元素 */
.item:last-child:nth-child(5n - 3) {
margin-right: calc(57% + 15% / 4);
}
如果你的需求是不定寬度或者動態(tài)的寬度：參考一下鏈接文章來源：http://www.zghlxwxcb.cn/news/detail-506819.html
flex布局最后一行列表左對齊的N種方法 - 走看看文章來源地址http://www.zghlxwxcb.cn/news/detail-506819.html
到了這里，關(guān)于flex布局最后一行列表左對齊的方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
