Распределите элементы flex равномерно, когда они обернуты

когда мой контейнер flexbox имеет более определенного количества элементов, я хочу, чтобы он использовал несколько строк. Вот мое текущее решение: 

.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

проблема в том, что элементы в последней строке растягиваются для заполнения строки.

Я хочу, чтобы он равномерно распределял элементы между строками, чтобы каждый элемент был как можно ближе к тому же размер насколько это возможно.

например, в строке не более 6 элементов. Когда у вас есть 8 элементов, он помещает 6 в первую строку и 2 во вторую. Я хочу поставить по 4 в каждом ряду.

это возможно с flexbox? Возможно ли это каким-либо образом?

6
css css3 flexbox html

2 ответов

Что мне пришлось в конечном итоге сделать, это вычислить количество ящиков на строку (на стороне сервера), а затем использовать это, чтобы получить минимальную ширину для каждого окна и применить его к каждому с помощью встроенного css.

0

на самом деле есть трюк, чтобы сделать это: Добавьте псевдо-элемент в контейнер и дайте ему flex-grow 50 и так. Это создаст притворный элемент, который заполнит остальную часть пространства. Обратите внимание, что я удалил border правило, поскольку оно подсчитывается по ширине элемента и конфликтует с flex-basis.

вот модифицированный пример:https://codepen.io/walidvb/pen/ZXvLYE

0