Задать вопрос

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

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

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

правда в IE всё как всегда
Ответ написан
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Есть костыль с 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%;
}
Ответ написан
Комментировать
DeDraw
@DeDraw
Создание и продвижение сайтов
.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;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы