防止在包装时出现空白显示：flex

Question

对于这种情况，我希望“第四项任务”位于“第一项任务”之下。我应该怎么做才能实现这一目标？谢谢。

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

https://jsfiddle.net/3avqjx1e/

Answer 1

您可以通过添加做到这一点align-content: flex-start;的.list类。

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

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

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