每行 5 个项目，在 flexbox 中自动调整项目大小

Question

我现在有这个：

 .container {
  background: gray;
  width: 600px;
  display: flex;
  flex-flow: row wrap;
  position: relative;
}
.item {
  background: blue;
  width: auto;
  height: auto;
  margin: 4px;
  flex: 1;
  flex-basis: 20%;
}

 <div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
</div>

我想要做的是在 flexbox 中每行有 5 个项目。目前它们没有出现，因为它们没有设置宽度/高度，这引出了我的下一个问题。是否可以自动调整项目的大小，以便每行容纳 5 个项目？

我该怎么做？

谢谢！

原文由 user6828106 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您给出 flex-basis: 20% 是正确的，但是您必须调整每个 flex 项目 的 4px 边距以使其正确 _包装_。

---

最后一行的等宽弹性项目

使用 flex: 0 1 calc(20% - 8px) 这意味着该项目不会增长超过宽度的 20%（针对边距进行调整）并且可以根据容器宽度缩小。请参阅下面的演示：

 .container {
  background: gray;
  width: 600px;
  height: 200px; /* height given for illustration */
  display: flex;
  flex-flow: row wrap;
  position: relative;
}

.item {
  background: blue;
  margin: 4px;
  flex: 0 1 calc(20% - 8px); /* <-- adjusting for margin */
}

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

---

另一种方法有点 hacky - 你可以保持 flex-grow 设置为一个和 flex-basis: calc(20% - 4px) 使用 flex: 1 1 calc(20% - 4px) 填充剩余的 _伪元素_：

 .container {
  background: gray;
  width: 600px;
  height: 200px; /* height given for illustration */
  display: flex;
  flex-flow: row wrap;
  position: relative;
}

.item {
  background: blue;
  margin: 4px;
  flex: 1 1 calc(20% - 8px); /* <-- adjusting for margin */
}

.container:after {
  content: '';
  display: block;
  flex: 999; /* grow by a large number */
}

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

如果你没有 每行 n 项 的要求，那么你可以参考这个：

• 类似于 grid-auto-flow dense 的无序列表

---

最后一行的 Flex 项目展开以填充可用空间

如果连续少于 5 个项目并且您希望它们填充剩余空间使用 flex: 1 1 calc(20% - 8px) （注意 flex-grow 在这里设置为 1 以便 弹性项目 在最后一行 _展开以填充剩余空间_）：

 .container {
  background: gray;
  width: 600px;
  height: 200px;  /* height given for illustration */
  display: flex;
  flex-flow: row wrap;
  position: relative;
}

.item {
  background: blue;
  margin: 4px;
  flex: 1 1 calc(20% - 8px);  /* <-- adjusting for margin */
}

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

原文由 kukkuz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 css 下面尝试每行中的五个项目。

 .container {
  background: gray none repeat scroll 0 0;
  display: flex;
  flex-flow: row wrap;
  position: relative;
  width: auto;
}

.item {
  background: blue none repeat scroll 0 0;
  flex: 1 1 18%;
  height: auto;
  margin: 4px;
  padding: 20px 0;
  width: auto;
}

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

原文由 Jainam 发布，翻译遵循 CC BY-SA 3.0 许可协议