Как правильно выровнять последний flex элемент?

Question

[Егор]

Внутри flex блока есть элементы с фиксированной шириной. Их может быть любое количество. Нужно чтобы в ряд помещалось столько элементов сколько влезет, и это собственно должно всё центрироваться на странице. Если делать justify-content: center Это последние элементы будут в центре если их будем мало.


Хотелось бы выровнять по левому краю. Если делать after элемент последний на всю ширину, то ломаются отступы



Можно ли как-то решить это с помощью flex? Если нет, то какие есть варианты решения?

codepen

Comments

[Андрей Федоров]

Не понял, а как вы добились такого эффекта как на второй картинке в одном flex-блоке? Дайте код.

[Андрей Федоров]

У меня в лоб при justify-content: space-between вот так codepen.io/aliencash/pen/begjzQ

[Егор]

Андрей Федоров: Забыл ссылку кинуть codepen.io/egorava/pen/QEdBaJ Если space-between использовать то они по сторонам расходятся блоки.

Answer 1

[Андрей Федоров]

У вас отступы браузер считает. Соответствено вам нужно чтобы он считал отступ и последнего элемента. Т.ч. без calc() не получится (ну или js)
codepen.io/aliencash/pen/rLjZBx

Answer 2

[Олег]

А что мешает сделать justify-content: flex-start и marginами выровнять по центру

Comments

[Егор]

то-что они будут не по-центру, справа будет пустота

Answer 3

[Алексей Сол]

Если у вас у дочерних элементов фиксированная ширина, то задайте им свойство flex с их шириной.

Вот, как-то так — https://jsfiddle.net/jrLkybfe/