Как сделать равномерное распределение во флекс контейнере с промежутками?

Question

[Дмитрий]

Есть блок с дисплей: flex и flex-flow: row wrap, в нем может содержаться произвольное количество элементов. У всех у них стоит flex-grow: 1, чтобы они равномерно растягивались во всю длину контейнера.
Как грамотнее всего сделать между ними пространство, например в 5px? Понятно что margin-left кривое решение, так как придется обнулять его у крайнего элемента. Есть что-то более красивое из флекс?

Comments

[Rustam Bainazarov]

Нет, у flexbox нет аналога grid-gap, только margin'ы.

Answer 1

[NaN]

Дмитрий

Почему просто не указать для элемента margin с помощью :not(:last-child)? или подобрать nth-child (если вдруг будет несколько строк)

Понятно что margin-left кривое решение, так как придется обнулять его у крайнего элемента.

.item:not(:last-child) { margin-right: 5px; }

Comments

[Сергей delphinpro]

https://jsfiddle.net/n9erwas4/
Обратите внимание на последний блок в первой строке (когда блоки переносятся). Совершенно ненужный отступ.

[NaN]

Сергей delphinpro, да, по этому я и пишу, если блоки на несколько строк - то лучше рассмотреть вариант с nth-child, а не last-child

[Дмитрий]

Сергей delphinpro, Про переносы речи нет

[Сергей delphinpro]

NaN, в вопросе указано что flex-flow: row wrap

nth-child вряд ли подойдет, так как кол-во элементов на строку скорее всего неизвестно.

для однострочных конструкций такой подход хорош, но не для многострочных.

[Сергей delphinpro]

Дмитрий, как нет, если вы указали в вопросе flex-flow: row wrap? =))

[Дмитрий]

Сергей delphinpro, Так одна строка ж не переносится или я чего-то недопонимаю?

[Дмитрий]

Сергей delphinpro, Да, я чего-то недопонимал. Wrap в моей задаче лишнее.

Answer 2

[frammmm]

Контейнеру
margin: 0 -2.5px;

Элементу
margin: 0 2.5px;

Comments

[Сергей delphinpro]

А вот это правильное решение
Демо: https://jsfiddle.net/n9erwas4/1/