Flexbox space between behavior combined with wrap

You can do this with CSS Grid layout using grid-template-columns: repeat(auto-fit, 200px) andjustify-content: space-between.

.browser {
  width: 700px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  justify-content: space-between;
  padding-bottom: 100px;
  border: 1px solid red;
}

.case {
  background-color: #ccc;
  height: 100px;
  border: 1px solid blue;
  margin-bottom: 10px;
}

<div class="browser">
  <div @click='projectClicked' class="case">
    <h3>Project</h3>
  </div>
  <div @click='projectClicked' class="case">
    <h3>Project</h3>
  </div>
  <div @click='projectClicked' class="case">
    <h3>Project</h3>
  </div>
  <div @click='projectClicked' class="case">
    <h3>Project</h3>
  </div>
  <div @click='projectClicked' class="case">
    <h3>Project</h3>
  </div>
</div>

It's pretty annoying, but you can't use flexbox for that.

The better way is to go with CSS grid instead, and apply

/* for space-around style */
.fixed-grid--around{
  grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
  justify-items: center;
}
/* for space-between style*/
.fixed-grid--between{
  grid-template-columns: repeat(auto-fit, 150px);
  justify-content: space-between;
}
/* both should run fixed width elements equal to the declared in the container */ 
.grid-element{
  width: 150px;
}

By setting the grid columns minimum width to their elements width and the max column width to 1 fr we can get them to evenly distribute the space around them. For space-between style, autofit and space-between does the trick.

So it adds columns to fill the container, evenly distributes the space between them until another column can be added, and wraps as needed. Just what we always hoped for flexbox to do.

A pen I made before exploring the issue:

https://codepen.io/facundocorradini/pen/XVMLEq

If you're gonna use this, make sure to add some fallback for browsers that don't support grid. might be floats, inline-blocks, flex, or whatever. CSS Grid is really good at overriding the fallbacks, so it's fairly easy to apply.

A solution is to add a hidden element using pseudo-element so you will have 6 elements and keep the layout you need.

.browser {
  width: 700px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 100px;
  flex-wrap: wrap;
  border: 1px solid red;
}

.case {
  flex: 0 0 200px;
  background-color: #ccc;
  height: 100px;
  border: 1px solid blue;
  margin-bottom: 10px;
}
.browser:after {
  content:"";
  flex: 0 0 200px;
}

<div class="browser">
  <div @click='projectClicked' class="case">
    <h3>Project</h3>
  </div>

  <div @click='projectClicked' class="case">
    <h3>Project</h3>
  </div>

  <div @click='projectClicked' class="case">
    <h3>Project</h3>
  </div>

  <div @click='projectClicked' class="case">
    <h3>Project</h3>
  </div>

  <div @click='projectClicked' class="case">
    <h3>Project</h3>
  </div>
</div>
CSS