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

2024-04-29

我现在有这个：

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

我想做的是在弹性盒中每行有 5 个项目。目前它们没有出现，因为它们没有设定的宽度/高度，这引出了我的下一个问题。是否可以自动调整项目大小，以便每行容纳 5 个项目？

我该怎么做？

Thanks!

你是对的flex-basis: 20%但你必须调整每个的 4px 边距弹性项目为了它wrap适当地。

最后一行的等宽 Flex 项目

Use 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) using 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 个项目要求的话你可以参考这个：

无序列表的作用类似于网格自动流动密集 https://stackoverflow.com/questions/55556049/unordered-list-that-acts-like-grid-auto-flow-dense/55556507#55556507

最后一行中的 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>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox