Flexbox — количество элементов в строке?

Question

[distorsion]

Вопрос такой - есть пять элементов, необходимо сначала выводить 3 элемента, затем переносом в следующей строке 2. Как это можно реализовать на flexbox?

Comments

[Иван]

а подробнее?Ничего не понял

[distorsion]

Вообщем по дизайну необходимо чтобы были в блоке 5 элементов - квадраты, внутри иконка и надпись. первые три блока идут в первой строке и центрируются по центру блока родителя, оставшиеся 2 блока идут во второй строке и так же центрируются по центру. проблема в том, что я не хочу это делать сеткой, вопрос вот в чем - есть ли во flexbox возможность указать - сколько элементов максимально может находится в одной строке, перед тем там будет сделан перенос остальных элементов?

Answer 1

[Богдан]

SLIM:

.main
      .child
      .child
      .child
      .child
      .child

CSS:

.main {
  background-color: #e1e1e1;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.child {
  margin: 5px;
  background-color: green;
  height: 20px;
  width: 30%;
}

Результат:

Answer 2

[Артём Ведищев]

Задай ширину родителя
https://jsfiddle.net/dkspezeh/