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

例如：打算一行放三個(gè)子元素

效果：

這看起來(lái)一點(diǎn)問(wèn)題都沒(méi)有，還挺好看的，但是如果下一行不夠三個(gè)呢，只有兩個(gè)的時(shí)候就會(huì)出現(xiàn)問(wèn)題。

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

現(xiàn)在來(lái)解決這個(gè)問(wèn)題，在這里提供兩個(gè)方法：

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

偽類方案

占位元素方案

效果

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

最新評(píng)論