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

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

Все классно, товары встают ровно в ряд по 3 шт. При изменении размер экрана тоже все ок. НО если в последнем ряду 2 товара, но они соответственно прижимаются к разным сторонам, а по середине дырень, как то не айс.
А если делать flex-start с маргином и у каждого 3 обунялть, то при сжатии бардак. Кто как решает эту проблему? Может flex-grow: 1?
  • Вопрос задан
  • 1965 просмотров
Пригласить эксперта
Ответы на вопрос 3
AndrewHaze
@AndrewHaze
Умею гуглить яндексом
Есть такой хак
<flex элемент с justify-content:space-between>:after {
        content: "";
        flex: auto;
        justify-content: flex-start;
}

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

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

А вообще... justify-content: center не подходит? Покрасивше будет
Ответ написан
@iol77
Мне ещё вот такой вариант попался
flex элемент с justify-content:space-between:after {
content: "";
justify-content: flex-start;
flex-basis: 32%;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы