prevent white space at wrap with display: flex

Question

For this scenario, I want "Fourth task" to be under "First task". What should I do to achieve this? Thanks.

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

score 6 · Accepted Answer · answered Oct 02 '20 at 16:54

You can accomplish this by adding align-content: flex-start; on .list class.

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

thanks bro. it was fast and simple. I had tried random things with align-items and justify-content but never heard align-content. — funky-nd, Oct 02 '20 at 16:56

score 3 · Answer 2 · answered Oct 02 '20 at 17:21

One approach is to add align-content: flex-start; in your CSS .list class.

Or else you can remove height property from .list class and let it dynamically increase with cards and wrap .list with a .container class which has background-color: yellow; and height:400.

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

prevent white space at wrap with display: flex

2 Answers2