• • 此问题在此处已有答案**：

What's the difference between align-content and align-items?（15个答案）
昨天关门了。
我希望第三个子容器，即宽度为100%的子容器，直接出现在前两个子容器的下面，而不是环绕到子容器的底部。
为什么会发生这种情况？我怎样才能让它按我想要的方式运行？
我知道我可以降低父容器的高度以使其按我所希望的方式显示，但我不明白为什么即使将容器设置为当前高度，它也不会按预期方式 Package

• 注意 *：您可能需要全屏查看示例才能明白我的意思

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