Distribute flex items evenly when they wrap

Question

When my flexbox container has more than a certain number of elements, I want it to use multiple rows. Here is my current solution:

.container {
  display: flex;
  width: 400px;
  background: black;
  padding: 6px;
  margin: 10px;
  flex-wrap: wrap;
}
.box {
  flex: 1 1 0;
  height: 32px;
  flex-grow: 1;
  min-width: 15%;
  border: solid 1px black;
}
.box:nth-child(even) {
  background: blue;
}
.box:nth-child(odd) {
  background: red;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

http://codepen.io/samkeddy/pen/mOwZBv?editors=1100

The problem is the items in the last row get stretched to fill the row.

What I want is for it to distribute the elements evenly between rows, so that every element is as close to the same size as possible.

For example, there are a maximum of 6 elements per row. When you have 8 elements, it puts 6 on the first row, and 2 on the second. I want it to put 4 on each row.

Is this possible with flexbox? Is this possible in any way?

Answer 1

There is actually a trick to do this: Add a pseudo element to the container, and give it a flex-grow of 50 or so. This will create a pretend element that will fill the rest of the space. Note that I removed the border rule, as it counts towards the width of the element and conflicts with flex-basis.

Here is the modified example: https://codepen.io/walidvb/pen/ZXvLYE