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

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

效果：

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

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

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

• 偽類：after
• 提供占位元素

偽類方案

占位元素方案

效果

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論