每行 5 个项目，在 flexbox 中自动调整项目大小 [英] 5 items per row, auto-resize items in flexbox

问题描述

我现在有这个:

.container {背景:灰色；宽度:600px；显示:弹性；flex-flow:行包装；位置:相对；}.物品 {背景:蓝色；宽度:自动；高度:自动；边距:4px；弹性:1；弹性基础:20%；}

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

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

我该怎么做?

谢谢！

解决方案

您提供 flex-basis: 20% 是正确的，但您必须调整每个 的 4px 边距flex item 使其包装正确.

<小时>

最后一行中的等宽 Flex 项目

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

.container {背景:灰色；宽度:600px；高度:200px；/* 给出的高度用于说明 */显示:弹性；flex-flow:行包装；位置:相对；}.物品 {背景:蓝色；边距:4px；flex: 0 1 calc(20% - 8px);/* <-- 调整边距 */}

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

<小时>

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

.container {背景:灰色；宽度:600px；高度:200px；/* 给出的高度用于说明 */显示:弹性；flex-flow:行包装；位置:相对；}.物品 {背景:蓝色；边距:4px；flex: 1 1 calc(20% - 8px);/* <-- 调整边距 */}.容器:在{之后内容: '';显示:块；弹性:999；/* 大量增长 */}

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

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

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

<小时>

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

如果在一行中您的项目少于 5 个并且您希望它们填充剩余空间，请使用 flex: 1 1 calc(20% - 8px)(注意 flex-此处将grow设置为1，以便最后一行中的flex items扩展以填充剩余空间):

.container {背景:灰色；宽度:600px；高度:200px；/* 给出的高度用于说明 */显示:弹性；flex-flow:行包装；位置:相对；}.物品 {背景:蓝色；边距:4px；flex: 1 1 calc(20% - 8px);/* <-- 调整边距 */}

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

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?

How would I do this?

Thanks!

解决方案

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

---

Equal Width Flex items in the last row

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:

.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-grow set to one and flex-basis: calc(20% - 4px) using flex: 1 1 calc(20% - 4px), and use a pseudo element that fills the remaining space:

.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 row requirement then you can refer this:

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

---

Flex items in last row expands to fill the available space

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-grow is set to 1 here so that the flex items in the last rows expand to fill the remaining space):

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

这篇关于每行 5 个项目，在 flexbox 中自动调整项目大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！