使用display:flex之后，div里面出现了额外的空白

前端开发 2026-07-10

我现在遇到了一个问题，尽管div里面除了文本之外没有任何内容，但仍有大量空白把它包裹起来，导致该div在父容器中尽可能多地占据空间。

我已经发现这是因为父级.container div使用display: flex; 所致的问题，但我还不确定实际该如何绕过它，或者是否需要对子div应用某些东西。

下面是.container与 .box类的CSS代码。遗憾的是，fit-content; 对.box div也不起作用，反而在它们本来应该占据空间的位置留下了大量空白，好像它们有很大的边距或间隙。

这里有一张展示网站的图片，图片中对不需要的空白处画了红色轮廓，并附有一个Stack Snippet，方便想查看修复前代码的人。颜色与截图中的并不完全相同，但代码结构仍然相同。

body {
  background-color: #C2C2C2;
  color: #fff;
  margin: 0;
  display: flex;
  justify-content:flex-end;
  align-items:center;
}

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/main.css">
    <title>neira's nook.</title>

</head>
<body>
    <div class="container">
    <div class="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit turpis varius est vulputate, in mollis urna vulputate. Nulla facilisi. Vestibulum lacus arcu, pretium in rhoncus in, viverra quis lacus. Integer sed odio tincidunt, maximus metus ut, pharetra metus. Morbi blandit convallis erat, et tempor ante tempor a.
    </div>
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit turpis varius est vulputate, in mollis urna vulputate. Nulla facilisi. Vestibulum lacus arcu, pretium in rhoncus in, viverra quis lacus. Integer sed odio tincidunt, maximus metus ut, pharetra metus. Morbi blandit convallis erat, et tempor ante tempor a.
    </div>
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit turpis varius est vulputate, in mollis urna vulputate. Nulla facilisi. Vestibulum lacus arcu, pretium in rhoncus in, viverra quis lacus. Integer sed odio tincidunt, maximus metus ut, pharetra metus. Morbi blandit convallis erat, et tempor ante tempor a.
    </div>
    </div>
</body>
</html>

解决方案

在箱子垂直排列时，你有 flex-direction: row。

你想要 flex-direction: column 来取代它，并与 justify-content: space-between 搭配使用。这样你就可以得到：

完整的样式声明：

.container {
    display: flex;
    flex-direction: column;
    /*              ^^^^^^ (not row)     */
    flex-wrap: wrap;
    gap: 0.5em;
    max-width: 650px;
    height: 100vh;
    padding: 0.3em;
    background-color: var(--inner-bg);
    background-image: var(--contain-img);
    background-position: center;
    background-size: cover;
    border-left: 5px solid;
    justify-content: space-between;
/*  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ (spaces the boxes vertically) */
}

如果不使用 justify-content: space-between，盒子会像下图那样被挤到列的顶部：