這篇文章主要介紹如何解決flex布局中justify-content: space-between對齊方式的一個BUG，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的潯陽網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

在設(shè)置display:flex,justify-content: space-betweend的時候，它會把子元素靠邊對齊平均分剩余的空間。

例如：打算一行放三個子元素

效果：

這看起來一點問題都沒有，還挺好看的，但是如果下一行不夠三個呢，只有兩個的時候就會出現(xiàn)問題。

這樣看起來特別惡心，中間空了一大塊出來，看起來特別像一個bug，而不是我們要的跟上一行一個一個對齊的效果。

現(xiàn)在來解決這個問題，在這里提供兩個方法：

• 偽類：after

• 提供占位元素

偽類方案

占位元素方案

效果

以上是“如何解決flex布局中justify-content: space-between對齊方式的一個BUG”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！