Evenly distribute flexibility elements when transferring them

Question

When my flexbox container contains more than a certain number of items, I want it to use multiple lines. 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>

Run codeHide result

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

The problem is that the elements in the last line are stretched to fill the line.

I want it to evenly distribute the elements between the lines, so that each element is as close to the same size as possible.

For example, in a line there should be no more than 6 elements. When you have 8 elements, it puts 6 on the first line and the second on the second. I want it to put 4 on each line.

Is this possible with flexbox? Is this possible anyway?

Answer 1

( ), css.

Answer 2

: flex-grow 50 . , . , border, flex-.

: https://codepen.io/walidvb/pen/ZXvLYE