Как выравнивать сетку элементов, если не подходит justify-content:space-between?

Question

[Алексей Скляров]

https://jsfiddle.net/gkho05oc/1/

Проблема следующая: заведомо мне не известно количество лейблов, их может быть 3, может быть 15. Первоначально я писал что-то похожее: .item + .item {margin-left:4px} чтобы каждый следующий лейбл отступал на 4 пкс, но если размещать последовательно 4+ лейбла, то на следующей строке лейблы идут криво. Оно и понятно, но писать :nth-of-type(4) {margin-left:0} не вариант, потому что придется адаптировать для каждой границы ширины окна браузера.

Как можно используя justify-content:space-between (может что-то другое) сделать так, чтобы блоки не по краям расставлялись, а имели поведение float'ов?

Собственно подобный моему вопрос описан тут: https://stackoverflow.com/questions/32205152/using...
Однако меня не устраивает эти костыли в виде скрытых блоков и тд, ибо, как я говорю, кол-во блоков мне заведомо не известно.

Такая проблема возникает довольно часто, как вообще это решается?

Comments

[Одиночка Айс]

Попробуйте блокам задать display:inline-block вместо flex, а родителю text-align:justify

[Lynn «Кофеман»]

В современных браузерах гридами.
А на флоатах ещё 10 лет назад работало lynn.ru/examples/engel-no-span.html

Answer 1

[Odisseya]

justify-content: flex-start;