Можно ли сделать выравнивание по левому краю через flex, чтобы?

Question

[Zanob]

Можно ли сделать выравнивание без костылей через justify-content: space-between, чтобы элементы выстраивались по 3 в ряд, а если их меньше, то они били слева направо а не расползались по всей ширине блока.
Я знаю старый колхозный способ через float: left и margin-right и :nth-child(3n) {margin-right: 0} Но мне интересно, до сих пор нет адекватного решения? Макет приложил. Спасибо за ваши ответы!

Comments

[Виталий Першин]

Почитайте про сетки что ли.

[Zanob]

Виталий, про какие сетки? Про бутстрап?

[xdevelx]

0. небольшой костыль в виде псевдоэлемента ::after c flex-grow: 1
1. использовать justify-content: center
2. использовать justify-content: flex-start (дефолтное значение)
3. CSS Grid

[Zanob]

xdevelx,

1. использовать justify-content: center (отступов не будет между элементами, а они нужны)
2. использовать justify-content: flex-start (отступов не будет между элементами, а они нужны)

[Тарас Шульга]

Zanob, вот этот чудный момент когда флексы нормально решить не могут, но за то гриды могу решить данную проблему в 3 строчки.

[Ankhena]

Но мне интересно, до сих пор нет адекватного решения?

Есть. И называется оно grid.

https://jsfiddle.net/Ankhena/5d8nakvc/

[Виталий Першин]

Zanob, Да хоть про бутстрап, сам принцип нужно понимать

Answer 1

[Михаил]

https://codepen.io/Quaden/pen/LYGOexW

Answer 2

[Dima Polos]

Стройте сетку.
Почитайте статьи на тему "сетка в верстке", в таком духе. Гриды, конечно, хорошо, но и на флексах есть сетки. Возьмите исходники бутстрап 4, посмотрите там, как правильно сказали в комментариях - поймите суть.
UPD: сетка.

Answer 3

[Ivan Sedov]