Css 使用显示：flex防止包裹处出现空白

对于这个场景，我希望第四个任务位于第一个任务之下。我应该怎么做才能做到这一点？谢谢

<div class="list">
  <div class="card"><h5>First Task</h5></div>
  <div class="card"><h5>Second Task</h5></div>
  <div class="card"><h5>Third Task</h5></div>
  <div class="card"><h5>Fourth Task</h5></div>
</div>

  .list {
    width: 600px;
    height: 400px;
    background-color: yellow;
    display: flex;
    flex-wrap: wrap;
  }

  .card {
    background-color: blue;
    border: solid black 2px;
    flex: 0 0 185px;
    height: 69px;
  }

---

您可以通过添加align内容来实现这一点：flex start；上。列表课

.名单{ 最大宽度：600px； 高度：400px； 背景颜色：黄色； 显示器：flex； 柔性包装：包装； 调整内容：灵活启动； } .卡片{ 背景颜色：蓝色； 边框：纯黑2px； flex:0185px； 高度：69px； } 第一项任务 第二项任务 第三项任务 第四项任务

---

您可以通过添加align内容来实现这一点：flex start；上。列表课

.名单{ 最大宽度：600px； 高度：400px； 背景颜色：黄色； 显示器：flex； 柔性包装：包装； 调整内容：灵活启动； } .卡片{ 背景颜色：蓝色； 边框：纯黑2px； flex:0185px； 高度：69px； } 第一项任务 第二项任务 第三项任务 第四项任务 一种方法是添加对齐内容：flex start；在CSS.list类中

或者，您可以从.list类中删除height属性，让它随卡片动态增加，并使用背景色为黄色的.container类包装.list；身高：400

代码：

一种方法是添加对齐内容：flex start；在CSS.list类中

或者，您可以从.list类中删除height属性，让它随卡片动态增加，并使用背景色为黄色的.container类包装.list；身高：400

代码：

---

谢谢兄弟。它既快又简单。我曾尝试过使用align项目和justify内容进行随机操作，但从未听说过align-content。谢谢兄弟。它既快又简单。我曾尝试过使用对齐项目和对齐内容进行随机操作，但从未听说过对齐内容。

.container {
  height: 400px;
  background-color: yellow;
}

.list {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
}

.card {
  background-color: blue;
  border: solid black 2px;
  flex: 0 0 185px;
  height: 69px;
}

<div class="container">
  <div class="list">
    <div class="card"><h5 class="bp3-heading">First Task</h5></div>
    <div class="card"><h5 class="bp3-heading">Second Task</h5></div>
    <div class="card"><h5 class="bp3-heading">Third Task</h5></div>
    <div class="card"><h5 class="bp3-heading">Fourth Task</h5></div>
  </div>
</div>