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

我该怎么做？

谢谢！

Answer 1

您给出的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>

如果您没有 每行n个项目的 要求，则可以参考以下内容：

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

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

如果一行中的项目少于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>