当 flex 项目换行时，移除多行之间的空格（间隙）

Question

我试图在一个高度固定的容器内让多个项目垂直排列，在没有空间时它们将继续并排。

这是我的设想：

我使用了 flexbox，给容器设置了固定的高度，设置了方向为 column 并将 flex-wrap 设置为 wrap 以实现这一目标：

问题在于列之间存在很大的空白间隔。

我尝试将 justify-content 和 align-items 都设置为 flex-start，但这可能是默认值。

有没有什么办法解决这个问题？

以下是代码：

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}
.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  flex-direction: column;
  background-color: #ccc;
}
.items {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: tomato;
  color: white;
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
}

<div class="container">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
</div>

codepen

- j.grima

Answer 1

弹性容器的初始设置为 align-content: stretch。

这意味着多行弹性项目将沿交叉轴均匀分布。

要覆盖此行为，请在容器上应用 align-content: flex-start。

---

当您在单行弹性容器（即 flex-wrap: nowrap）中工作时，用于沿交叉轴分配空间的属性是 align-items 和 align-self。

当您在多行弹性容器（即 flex-wrap: wrap）中工作时，用于沿交叉轴分配弹性行（行/列）的属性是 align-content。

来自规范：

8.3. 交叉轴对齐：属性 align-items 和 align-self

align-items 设置所有弹性容器项的默认对齐方式，包括匿名弹性项目。 align-self 允许为单个弹性项目覆盖此默认对齐。

8.4. 填充弹性行：属性 align-content

当在交叉轴上有额外空间时，align-content 属性会将弹性容器的行对齐到弹性容器内部，类似于 justify-content 在主轴上对齐各个项。请注意，此属性不影响单行弹性容器。

align-content属性有六个取值：

• flex-start（左对齐）
• flex-end（右对齐）
• center（居中对齐）
• space-between（两端对齐，项目之间的间隔相等）
• space-around（每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍）
• stretch（默认值，如果项目未设置高度或设为auto，将占满整个容器的高度）

这里是stretch的定义：

stretch

行在剩余空间中拉伸以占据全部空间。如果剩余的自由空间为负，则此值等同于flex-start。否则，自由空间被平均分配给所有行，增加它们的交叉轴尺寸。

换句话说，沿着交叉轴使用align-content: stretch与沿着主轴使用flex: 1类似。

- Michael Benjamin

---

谢谢您的解释 :) 完全忘记了align-content属性。 - j.grima

Answer 2

对于可能有用的人。 我刚遇到一个问题，当网格（无论是内联网格还是内联块）与内容（按钮）一起使用时，会出现不同文本长度的问题。 结果是个别网格项之间的间隙不均匀。 解决方案是切换到弹性布局，并按照以下方式修改容器和个别项：

.grid-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
}
.grid-item {
  height: 80px;
  width: 120px;
  margin: 0px;
}

- user12170141

---

你的回答可以通过提供更多的支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - undefined