包裝時均勻分布彈性項目

Question

當我的 flexbox 容器有超過一定數量的元素時，我希望它使用多行。 這是我目前的解決方案：

 .container { display: flex; width: 400px; background: black; padding: 6px; margin: 10px; flex-wrap: wrap; } .box { flex: 1 1 0; height: 32px; flex-grow: 1; min-width: 15%; border: solid 1px black; } .box:nth-child(even) { background: blue; } .box:nth-child(odd) { background: red; }

 <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>

http://codepen.io/samkeddy/pen/mOwZBv?editors=1100

問題是最后一行中的項目被拉伸以填充該行。

我想要的是它在行之間均勻分布元素，以便每個元素盡可能接近相同的大小。

例如，每行最多有 6 個元素。 當您有 8 個元素時，它會將 6 個放在第一行，將 2 個放在第二行。 我希望它在每行上放 4 個。

這可以用 flexbox 實現嗎？ 這有可能嗎？

Answer 1

實際上有一個技巧可以做到這一點：向容器中添加一個偽元素，並為其設置 50 左右的flex-grow 。 這將創建一個將填充其余空間的假裝元素。 請注意，我刪除了border規則，因為它計入元素的寬度並與 flex-basis 沖突。

這是修改后的示例： https : //codepen.io/walidvb/pen/ZXvLYE

Answer 2

我最終要做的是計算每行（服務器端）的框數，然后使用它來獲得每個框的最小寬度，並使用內聯 css 將其應用於每個框。

編輯：我知道這不好，但這仍然是唯一的答案。 你不能用 CSS 做到這一點。