使用display: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

一种方法是在你的CSS. list类中添加amie-Content： flex-start；。

或者，您可以从中删除height属性。列出类，让它随卡片和包装而动态增加。使用列表。背景颜色为黄色的容器类 和高度：400。

代码：https://jsfiddle.net/abhinav3414/ysnevatx/

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

Answer 2

您可以通过添加align content:flex start 打开。列出类。

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