最后一行上的flex項目之間的余量不一致

Question

我正在使用flex 。 兩個div元素之間似乎存在意外的差異 - 第三行在div之間的邊距不同於前兩行：

如何修改代碼，使第三行的邊距與前兩行相同？

 .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .container:after { flex: 1; content: ''; } .container form { width: 100%; display: flex; } .container .comment { flex: 1; } .square { padding: 10px; width: calc(100% / 9); margin: 0.7vw 0 0.7% 1vw; background: red; } 

 <div class="container"> <form method="post" style="margin: 0.7vw 0 0.7% 1vw;"> <input class="comment" type="text"> <input type="submit"> </form> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> </div> 

JsFiddle： https ：//jsfiddle.net/4ydyoqmx/

Answer 1

問題是你的偽元素占用了最后一行的所有可用空間。

是的，這樣做是為了抵消兩個flex項目justify-content: space-between的justify-content: space-between ，這會導致它們出現在兩端......

...但是當項目填滿行時，它也會殺死space-between提供的比例間距。

在使用特定的最后一行對齊屬性修改flex規范之前，您可以實現解決此問題的hack：

在最后一個真實項目后添加隱形彈性項目。

在下面的示例中，我為您的代碼添加了七個幻像項。

 .container { display: flex; flex-wrap: wrap; justify-content: space-between; } /* .container:after { flex: 1; content: ''; } */ .invisible { visibility: hidden; } .container form { width: 100%; display: flex; } .container .comment { flex: 1; } .square { padding: 10px; width: calc(100% / 9); margin: 0.7vw 0 0.7% 1vw; background: red; } 

 <div class="container"> <form method="post" style="margin: 0.7vw 0 0.7% 1vw;"> <input class="comment" type="text"> <input type="submit"> </form> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square invisible"></div> <div class="square invisible"></div> <div class="square invisible"></div> <div class="square invisible"></div> <div class="square invisible"></div> <div class="square invisible"></div> <div class="square invisible"></div> </div> 

修改小提琴

更多信息：

• flex-grow不按預期調整flex項目的大小
• 正確調整最后一行的彈性項目的大小和對齊方式

---

邊注

你很可能會遇到這個規則的一些麻煩：

.square { margin: 0.7vw 0 0.7% 1vw; }

flexbox規范建議不要在flex容器中使用百分比邊距和填充。

作者應該完全避免在彈性項目中使用填充或邊距的百分比，因為它們會在不同的瀏覽器中獲得不同的行為。

這里還有一些：

4.2。 Flex項目邊距和填充

Flex項目的邊距和填充百分比可以通過以下任一方式解決：

• 他們自己的軸（左/右百分比分解寬度，頂部/底部分解高度），或，
• 內聯軸（左/右/上/下百分比全部解析寬度）

用戶代理必須選擇這兩種行為之一。

注意：這種差異很糟糕，但它准確地捕獲了當前的世界狀態（實現之間沒有達成共識，並且在CSSWG中沒有達成共識）。 CSSWG的目的是瀏覽器將收斂於其中一個行為，此時規范將被修改。

Answer 2

有幾種不同的方法可以做到這一點，具體取決於你希望“方塊”如何響應：

flex-grow ：

.square {
    flex-grow: 1;
    padding: 10px;
    width: calc(100% / 9);
    margin: 0.7vw 0 0.7% 1vw;
    background: red;
}

小提琴： https ： //jsfiddle.net/4ydyoqmx/2/

inline-block ：

.square {
    display: inline-block;
    padding: 10px;
    width: calc(100% / 9);
    margin: 0.7vw 0 0.7% 1vw;
    background: red;
}

小提琴： https ： //jsfiddle.net/4ydyoqmx/4/

第三種選擇：

刪除content: ''來自.container:after因為這會導致問題

Answer 3

這是justify-content: space-between .container justify-content: space-between設置，它執行此操作（與flex-wrap: wrap; ）：它最終將元素分布在那些被填充的行中，但是在最后一行中看起來不太好，因此它在這些元素之間留下預定義/默認邊距。 （這與合理的文本段落類似）

避免這種情況的一種可能性是簡單地擦除justify-content: space-between ，從而將其設置為默認的left對齊（但它們將不再分布在整個寬度上）：

https://jsfiddle.net/h8ejaob7/

Answer 4

這樣做是因為你在使用空間來證明內容的合理性。 所以在屏幕上它不能容納第7個div所以它在屏幕上只放置6個div並在6個div元素之間放置相等的空間。但是在最后一行只有2個div，這意味着你的第3行沒有完全填充div元素。 這就是為什么它沒有像上線那樣放置空間。

如果再放4個div，那么你將獲得與上線相同的精確效果。

Answer 5

這個問題可以通過將這個代碼添加到你的CSS來解決。

*{margin:0px;
padding:0px}

希望它有效..