html - 包裹时均匀分布 flex 元素

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

问题是最后一行中的元素被拉伸(stretch)以填满该行。

我想要的是它在行之间均匀分布元素，以便每个元素尽可能接近相同的大小。

例如，每行最多有 6 个元素。当你有 8 个元素时，它会将 6 放在第一行，将 2 放在第二行。我希望它每行放 4 个。

这可以用 flexbox 实现吗？这有可能吗？

Answer 1

实际上有一个技巧可以做到这一点: 向容器中添加一个伪元素，并为其指定 50 左右的 flex-grow。这将创建一个假装元素来填充其余空间。 请注意，我删除了 border 规则，因为它计入元素的宽度并与 flex-basis 冲突。

这里是修改后的例子:https://codepen.io/walidvb/pen/ZXvLYE