为何Flexbox前二子元素与第三子元素间出现间隙？如何解决？

我希望宽度设为100%的第三个子元素直接显示在前两个子元素的下方，但实际它却被挤到了父容器的底部。我知道可以通过缩小父容器高度实现预期显示，但不理解为何在父容器高度设为80vh时，元素无法按预期换行。

代码示例 #

CSS代码：

.parent{
  height: 80vh;
  width: 100%;
  border: 1px solid red;
  
  display: flex;
  flex-wrap: wrap;
  grid-gap: 10px;
}

.parent > *{
  background-color: lightblue;
}

.child1{
  height: 100px;
  width: 100px;
}

.child2{
  width: 100%;
}

HTML代码：

<div class="parent">
  <div class="child1">some text</div>
  <div class="child1">some text</div>
  <div class="child2">
    <div>more text</div>
    <div>more text</div>
    <div>more text</div>
    <div>more text</div>
    <div>more text</div>
    <div>more text</div>
    <div>more text</div>
  </div>
</div>

原因分析 #

这是Flex布局的默认行为导致的：

• 父容器设置了固定高度80vh，但未显式指定align-content属性，Flex的默认值为align-content: stretch
• 该属性会让所有换行后的flex行自动拉伸，填满父容器在垂直交叉轴上的剩余空间
• 前两个子元素占据第一行，第三个子元素单独占第二行，第二行被拉伸至填满父容器剩余高度，因此看起来第三个子元素被挤到了底部

解决方法 #

给父容器添加align-content: flex-start（也可根据需求选择center、flex-end等其他值），让flex行按自身高度紧凑排列，不再被拉伸：

修改后的CSS代码：

.parent{
  height: 80vh;
  width: 100%;
  border: 1px solid red;
  
  display: flex;
  flex-wrap: wrap;
  grid-gap: 10px;
  align-content: flex-start; /* 新增该行 */
}

.parent > *{
  background-color: lightblue;
}

.child1{
  height: 100px;
  width: 100px;
}

.child2{
  width: 100%;
}

额外说明：

• align-content仅在flex容器有多行时生效（需配合flex-wrap: wrap或wrap-reverse），作用是控制多行在交叉轴上的对齐方式
• 如果不需要父容器固定高度，直接移除height:80vh，让父容器高度由子元素内容撑开，也能达到预期效果

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