Можете помочь с flexbox'ом?

Question

[Илья Ватрушка]

Необходимо красиво разместить блоки, примерно так:

Но у меня не выходит сделать так что бы все элементы находились и в центре и при добавлении прижимались к левому краю. Все время выходит как то так:

Но когда делаю justify-content: center у меня вроде все как нужно, но последние элементы появляются по центру, а необходимо что бы они были прижаты к левому краю. Для этого юзается flex-start но тогда все элементы не будут находится в центре, а будут смещены влево.

Как мне быть?

Заранее спасибо за советы

Answer 1

[Evanre]

Первый рисунок это поведение флексбокса (выравнивания контента) по умолчанию (justify-content: flex-start), то что у вас получается это скорее всего justify-content: center; Чтобы получить еффект как на первом рисунке (элементы заполняли собой в ряду все пространство и выравнивались по левому краю) уберите контейнеру justify-content: center; и дайте элементам равную ширину (например если их 4шт в ряду то по 25% каждому и т.д.) либо пропишите элементам (не флекс контейнеру) свойство flex-grow: 1;. Вот ссылка на песочницу, можете поиграться в ней, помогает понять, как работает флексбокс.

Answer 2

[Skrolea]

А просто
flex-flow: row wrap не подойдет?

https://jsfiddle.net/8a4j8crf/1/