How can I set a minimum amount of space between flexbox items?

Bit late the the party but I ran into the same issue. The way I solved it probably wont work for everyone but here it is for those who can use it.

The basic idea is that you have a min gap of x. You set the left and right margins of each item to x/2 so that the distance between the items will be x (margin + margin). Then you wrap all of the items in a container with a left and right margin of -x/2. This will hide the margin on the items at the edges of each row.

Here is a working example:

.box {
  border: 1px solid black;
  overflow-x: hidden;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 -1em;
}

.item {
  display: flex;
  border: 1px solid grey;
  padding: 1em;
  width: 20%;
  margin: 0 1em;
}

<div class="box">
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</div>

The overflow-x: hidden; on .box is to prevent the horizontal scrollbar that shows up in some browsers because of the margin overflowing.

If you want the gap to always be consistent and for rows with only one item to have that item span the whole row then you can add flex-grow: 1 to .item.