使用 display: flex 后，如何消除 div 内多余的空白？

2026-11-04数据小陈

给 .container 加上 align-content: flex-start;，就能消除 Flex 行拉伸导致的多余空白。保留 .box 的 padding: 1rem，文字四周仍会有正常的内边距。

为什么子元素会被拉高？

这段布局同时设置了：

.container {
  flex-direction: row;
  flex-wrap: wrap;
  height: 100vh;
}

.box {
  width: 100%;
}

.box 的宽度使每个元素各占一行，而 .container 的高度固定为视口高度。当文字所需的总高度小于容器高度时，容器内就会剩余垂直空间。

在这里，align-content 的初始值 normal 会按 stretch 的方式分配剩余空间，使各行变高。默认的 align-items: normal 又会拉伸高度为 auto 的子元素，因此 .box 也跟着所在行变高。

出现大片空白时，除了检查 margin 和 gap，也要留意 Flex 行和子元素是否被拉伸。

如何修改现有代码？

最小的修改是在 .container 中增加一行：

.container {
  align-content: flex-start;
}

各行会从容器顶部开始排列，剩余高度留在最后一行下方。行之间仍保留原来的 gap: 0.5em。

结合原有样式，可以写成：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.5em;
  max-width: 650px;
  height: 100vh;
  padding: 0.3em;
  background-color: #7A7A7A;
  border-left: 5px solid;
}

.box {
  box-sizing: border-box;
  background-color: #000;
  border: 1px solid #fff;
  padding: 1rem;
  width: 100%;
}

这里还给 .box 设置了 box-sizing: border-box，让 width: 100% 包含左右 padding 和 border，避免盒子的外部宽度超出预期。这项设置处理宽度计算；消除垂直拉伸仍靠 align-content: flex-start。

为什么 fit-content 或 align-items 没有彻底解决？

如果把 .box 的高度设为 fit-content，盒子本身可以不再填满所在行，但 Flex 行仍可能占据分配到的额外高度。这样一来，盒子内部的空白就可能变成盒子之间的大块空白。

只设置下面这条规则也可能出现类似现象：

.container {
  align-items: flex-start;
}

align-items 控制元素在各自行内的对齐方式，align-content 控制多行在容器交叉轴上的排列和空间分配。这段代码需要先调整后者。

另外，body 上的 align-items: center 只控制它的直接 Flex 子元素 .container，不会继承给 .box。

容器是否必须固定为一屏高？

设置 align-content: flex-start 后，.container 仍然保持 100vh 高，因此内容下方留有空白是正常的。如果希望容器随内容增高，同时至少占满一屏，可以把高度设置改为：

.container {
  box-sizing: border-box;
  height: auto;
  min-height: 100vh;
  align-content: flex-start;
}

这样内容较少时，容器至少一屏高；内容较多时，容器可以继续增高。box-sizing: border-box 也会让容器自身的 padding 和 border 计入这一最小高度。