Как сделать последней строке флексбокса justify-content, отличный от остального флексбокса?

Question

[Илья Ломаев]

Как сделать последней строке флексбокса justify-content, отличный от остального флексбокса?
Есть флексбокс с карточками, которые переносятся на новую сроку при сужении экрана (flex-wrap: wrap).
Как можно сделать так, чтобы для всех полностью заполненных строк justify-content был space-between; , а для нижней строки - flex-start; ?

Comments

[Ankhena]

Самое простое - заменить флекс на грид.

С флексами это решается костылем: добавляется максимально возможное минус один количество пустых, не имеющих высоты и отступов элементов в конец.
Альтернатива с js: вместо пустых элементов использовать псевдоэлемент и передавать ему ширину (или базис) через кастомное свойство.

[Divviner]

Как идея:

Ограничьте нужную строку inline-тегом , что-то вроде того: Последняя строка - flex

Потом переведите span в строчно-блочный или блочный элемент(display: block; или display: inline-block;)и примените необходимые flex-значения.

Если у вас строки "в отдельности", можно подумать о прочтении псевдо-классов, что-то вроде nth-child(), а лучше все из них.

[Илья Ломаев]

Divviner, так если бы был определенный набор элементов, которые всегда в последней строке - решение очевидно
а у меня последняя строка динамична, и на разных разрешениях там разное количество элементов

[Ankhena]

Илья Ломаев, почему вы не хотите использовать грид?