flex多行多列兩端對(duì)齊,列不滿(mǎn)左對(duì)齊

最近遇到布局上要求item兩端對(duì)齊,且最后一行在列不滿(mǎn)的情況下要求左對(duì)齊,使用flex的justify-content: space-between;
實(shí)現(xiàn)時(shí)發(fā)現(xiàn)最后一行不能左對(duì)齊,而是兩端對(duì)齊方式。

不是項(xiàng)目上想要的效果

# 網(wǎng)上查了一些資料,有兩種方法可以實(shí)現(xiàn)效果:
**1.添加幾個(gè)空item**(對(duì)我來(lái)說(shuō)最有效的,適用于大多數(shù)場(chǎng)景)
? ?根據(jù)布局列數(shù)添加空item,比如每行最大n列,那么在最后添加n-2個(gè)空item即可

```
<html>
<style>
.box {

? ? display: flex;

? ? flex-wrap: wrap;

? ? justify-content: space-between;

}

.item {

? ? width: 30%;

? ? height: 50px;

? ? background-color: #f1f8ff;

? ? margin-bottom: 10px;

}

.placeholder {

? ? width: 30%;

? ? height: 0px;

}

</style>

<body>

? <div class="box">

? ? <div class="item"></div>

? ? <div class="item"></div>

? ? <div class="item"></div>

? ? <div class="item"></div>

? ? <div class="item"></div>

? ? <div class="placeholder"></div>

? </div>

</body>

</html>

```

實(shí)現(xiàn)效果


**2.利于after或者before(適用于每行3或者4列)**

```
.box:after {
????display:block;
????content:"";
????width: 30%;
????height:0px;
}
```

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容