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个项目。目前它们没有出现，因为它们没有设定的宽度/高度，这引出了我的下一个问题。是否可以自动调整项目大小以使其中每个项目适合每行？

我该怎么做？

谢谢！

Answer 1

您提供flex-basis: 20%是正确的，但您必须调整每个弹性项目的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>

另一种方法是 hacky - 您可以使用flex-grow将flex-basis: calc(20% - 4px)设置为1并flex: 1 1 calc(20% - 4px)，并使用伪元素< / em>填充剩余空间：

.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项目每行 的要求，那么您可以参考：

Unordered list that acts like 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>

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>

Answer 3

这是一个可能的解决方案：https://jsfiddle.net/9f955jk2/3/ 您必须知道边距或填充，这就是我将宽度设置为18％的原因如果要删除所有边距和填充，可以将它们设置为20％（每行100％/ 5项）。也不要忘记边界也会占用一些空间。容器应该是100％，否则你必须将宽度除以5，并为每个项目指定像素而不是％

 .container {
      width:100%;
    }

Answer 4

我在WordPress项目中使用它，我必须按类别列出文章，嵌套在列中。我刚刚为响应式布局编写了一些css，因此当你减少浏览器宽度时，连续的元素就会减少。

＆＃13;

.container {
  margin: 20px auto;
  width: 80%;
  min-height: 100px;
  display: flex;
  flex-flow: row wrap;
}

.item {
  margin: 10px;
  flex: 1 1 calc(20% - 20px);
  background-color: lightgreen;
}

@media screen and (max-width: 1200px) {
  .item {
    flex: 1 1 calc(25% - 20px)
  }
}

@media screen and (max-width: 900px) {
  .item {
    flex: 1 1 calc(33% - 20px)
  }
}

@media screen and (max-width: 750px) {
  .item {
    flex: 1 1 calc(50% - 20px)
  }
}

@media screen and (max-width: 550px) {
  .item {
    flex: 1 1 calc(100% - 20px)
  }
}

＆＃13;

<div class="container">
  <div class="item"><a>Link1</a></div>
  <div class="item"><a>Link1</a></br><a>Link2</a></div>
  <div class="item"><a>Link1</a></br><a>Link2</a></br><a>Link3</a></div>
  <div class="item"><a>Link1</a></br><a>Link2</a></br><a>Link3</a></br><a>Link4</a></div>
  <div class="item"><a>Link1</a></br><a>Link2</a></br><a>Link3</a></br><a>Link4</a></br><a>Link5</a></div>
  <div class="item"><a>Link1</a></br><a>Link2</a></br><a>Link3</a></br><a>Link4</a></br><a>Link5</a></br><a>Link6</a></div>
</div>

＆＃13;

每行5个项目，自动调整flexbox中的项目

4 个答案:

最后一行中的等宽度Flex项目

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