为什么我的 flexbox 在前两个孩子和第三个孩子之间增加了一个空隙？答案

【问题标题】：Why is my flexbox adding a gap between the first two children and the third?为什么我的 flexbox 在前两个孩子和第三个孩子之间增加了一个空隙？
【发布时间】：2023-01-26 04:26:40
【问题描述】：

我希望第三个孩子，即宽度为 100% 的孩子，直接出现在前两个孩子的下方，而是环绕到子容器的底部。

为什么会这样？我怎样才能让它表现得像我想要的那样？

我知道我可以降低父容器的高度以使其显示为我想要的，但我不明白为什么即使将容器设置为它的高度它也不会按预期包装

笔记：您可能需要全屏查看示例才能明白我的意思

.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%;
}

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

【问题讨论】：

标签： html css flexbox

【解决方案1】：

如果你想让所有的元素都在顶部，使用align-content: flex-start;

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

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

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

.child2{
  width: 100%;
}

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

【讨论】：