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。

Answer 2

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

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

包裹时均匀分布弹性物品

2 个答案: