Flex容器动态删除子项后出现多余间距的原因及解决方法

我有一个灰色的div容器，内部包含若干子项，容器设置为flex布局且允许换行，高度为100vh（与窗口高度一致），支持垂直滚动。初始状态下子项排列紧密，容器可正常滚动：

.container {
  width: 500px;
  height: 100vh;
  background-color: lightgrey;
  padding: 10px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 200px;
  height: 200px;
  background-color: gold;
  border: 1px solid orange;
}

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

但当动态删除部分子项后，子项之间出现了多余的空白间距，请问该现象产生的原因是什么？如何消除这些多余间距？

原因分析 #

这是Flex布局的align-content属性默认行为导致的：

• 默认情况下align-content: stretch，这个属性会让flex容器中多行子项的每一行自动拉伸，填满容器垂直方向的剩余空间。当删除部分子项后，剩余子项的行数减少，每行就会被拉伸得更高，从而产生垂直方向的多余空白。
• 注意：align-content只在容器设置了flex-wrap: wrap且子项确实换行成多行时才会生效。

解决办法 #

方法1：修改align-content属性

将容器的align-content设置为flex-start（也可根据需求选flex-end、center等），这样行与行之间不会被拉伸，会按照子项原本的高度紧密排列：

.container {
  /* 保留原有属性，新增下面这行 */
  align-content: flex-start;
}

方法2：固定间距+取消拉伸

如果希望子项之间有可控的间距，而非拉伸填充，可以配合gap属性设置固定间距，同时保持align-content: flex-start：

.container {
  /* 保留原有属性 */
  align-content: flex-start;
  gap: 10px; /* 可根据需求调整间距大小 */
}

内容的提问来源于stack exchange，提问作者marielle