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

5 items per row, auto-resize items in flexbox

提问by user6828106

I have this at the moment:

我现在有这个：

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

What I'm trying to do is have 5 items per row in a flexbox. Currently they don't appear because they don't have a set width/height, which leads me to my next question. Is it possible to auto-resize the items in order for 5 of them to fit per row?

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

How would I do this?

我该怎么做？

Thanks!

谢谢！

回答by kukkuz

You are right in giving a flex-basis: 20%but you have to adjust for the 4px margin on each flex itemfor it to wrapproperly.

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

---

---

Equal Width Flex items in the last row

最后一行中的等宽 Flex 项目

Use flex: 0 1 calc(20% - 8px)- this means the item won't grow beyond 20% of width (adjusting for margin) and can shrink based on the container width. See demo below:

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

---

---

Another approach is a bit hacky- you can keep flex-growset to one and flex-basis: calc(20% - 4px)using flex: 1 1 calc(20% - 4px), and use a pseudo elementthat fills the remaining space:

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

If you don't have the n item per rowrequirement then you can refer this:

如果您没有每行要求n 项，那么您可以参考：

• Unordered list that acts like grid-auto-flow dense

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

---

---

Flex items in last row expands to fill the available space

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

If in a row you have less than 5 items and you want them to fill in the remaining space use flex: 1 1 calc(20% - 8px)(note that flex-growis set to 1 here so that the flex itemsin the last rows expand to fill the remaining space):

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

回答by Jainam

try below css for five items in each row.

为每行中的五个项目尝试下面的 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>

回答by Zsiga

I'm using this on a WordPress project, where I have to list articles by categories, nested in columns. I just wrote some css for the responsive layout, so as you decrease the browser width, there are less elements in a row.

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

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

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

回答by vadber

Here is a possible solution: https://jsfiddle.net/9f955jk2/3/You have to be aware of margins or paddings, that's why I setted the width to 18% You can set them to 20% (100%/5 items per row) if you will remove all the margins and paddings. Also don't forget that border will also take some space. The container should have 100%, otherwise you have to divide the width by 5 and specify it in pixel for each item and not in %

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

 .container {
      width:100%;
    }