Как бороться с дыркой если justify-content:space-between?

Question

[colorkid]

Всем привет. Не первый раз сталкиваюсь с такой проблемой.
Пример. Интернет магазин, страница категории товаров, контейнер товаров flex элемент с justify-content:space-between, в ряду 3 товара у которых width: width: 32%;

Все классно, товары встают ровно в ряд по 3 шт. При изменении размер экрана тоже все ок. НО если в последнем ряду 2 товара, но они соответственно прижимаются к разным сторонам, а по середине дырень, как то не айс.
А если делать flex-start с маргином и у каждого 3 обунялть, то при сжатии бардак. Кто как решает эту проблему? Может flex-grow: 1?

Answer 1

[Андрей]

Есть такой хак

<flex элемент с justify-content:space-between>:after {
        content: "";
        flex: auto;
        justify-content: flex-start;
}

правда в IE всё как всегда

Comments

[colorkid]

о спасибо, щас посмотрим

[smithana]

Огромное спасибо!! я уже был готов писать замудрённый Js

Answer 2

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

Есть костыль с flex-start и margin-right, когда ты контейнеру задаёшь margin-right: -margin объектов

Тоже столкнулся, но у меня правый край не критичен, поэтому просто flex-start

А вообще... justify-content: center не подходит? Покрасивше будет

Comments

[colorkid]

спасибо за вариант, попробую.

Answer 3

[iol77]

Мне ещё вот такой вариант попался
flex элемент с justify-content:space-between:after {
content: "";
justify-content: flex-start;
flex-basis: 32%;
}

Answer 4

[Артемий Аверин]

.positions {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}
.positions .position {
	flex: 1 1 25%;
	vertical-align: top;
}

Достаточно добавить такую конструкцию

.positions::after {
	content: "";
	flex: 1 1 25%;
	justify-content: flex-start;
}