包裹时均匀分布弹性物品

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

我最终要做的是计算每行（服务器端）的框数，然后使用它来获取每个框的最小宽度，并使用内联 css 将其应用到每个框。

编辑：我知道这不好，但这仍然是唯一的答案。你不能用 CSS 做到这一点。