Как решить проблему последними элементами в каталоге на flexbox?

Question

[freekir]

Есть блок с карточками товаров, у родителя задано:

div{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

Остальное думаю не так важно.

И все хорошо, ровно до того момента когда карточек если блок 2на 2 их 4, 3 на3 их 9 и т.д. Но если к примеру блок из 20ти элеметов по 4 в строку, имеет пагинацию и на последней странице меньше, предположим 18, то выходит такая фигня как на картинке. Вопрос, как вы решаете эту проблему? И как последние элементы сделать прижатыми к левому краю. Да верстка не фиксированая, еще есть вариант что карточек становится 2 в строку и это тоже нужно учесть. Да хотелось бы обойтись без JS.

Answer 1

[Егор Живагин]

.cart:last-child{
    margin-right: auto;
}

Answer 2

[Gortyser]

Можно добавить еще таких же элементов с каким-нибудь классом вроде .cart-empty и обнулить для них высоту и все отступы, ширина должна остаться как у обычного элемента.
В результате эти элементы будет не видно, но пространство они будут занимать. Если их сделать слишком много (например, на определенном разрешении будет по 2 карточки в ряд, а пустых элементов 3), то проблем тоже не возникнет, т.к. высота нулевая и все это дело просто схлопнется.
Решение не самое хорошее, так как добавляется лишний html-код, но действенное и простое.