每行5个项目，Flexbox中的项目会自动调整大小

Z时代
2024-01-10
分类：问答

我现在有这个：

.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个项目？

我该怎么做？

谢谢！

回答：

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

最后一行的等宽Flex项目

用途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>

另一种方法有点怪诞 -您可以将flex-grow设置为1并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>

如果您没有要求，则可以参考以下内容：

像网格自动流动密集的无序列表

最后一行的伸缩项目会扩展以填充可用空间

如果一行中的项目少于5个，并且希望它们填充剩余空间，请使用flex: 1 1 calc(20% - 8px)（请注意，flex-

grow此处将其设置为1，以便最后一行中的 flex项目扩展为填充剩余空间 ）：

.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>