Как равномерно распределить карточки на странице?

Всем привет!

Есть задача распределить блоки равномерно в линиях. То есть: край первого по левому краю контейнера, край последнего по правому краю контейнера. Остальное место распределяется между блоками равномерно. Конечно, сразу же напрашивается: flexbox + justify-content:space-between. Как раз то что нужно, но есть пара моментов, котрые все портят:

1. Если блока 2 то:
5c6e7e944a83b786479910.png
есть конечно вариант обойти с помощью проверки количества (т.к. у меня в ряд 3 то все что <3 другой класс), но этот вариант не учитывает второй случай:

2. А если блоков 5:
5c6e7f169b595118736729.png

Я конечно понимаю что можно мудрить с отрицательными отступами. Но может есть что-то красивее? Есть что-то чего я упускаю во flexbox?

Какие ваши решения?
  • Вопрос задан
  • 615 просмотров
Решения вопроса 2
@r_mustang
.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}


https://codepen.io/ из https://stackoverflow.com/
Ответ написан
ellenripley4
@ellenripley4
Любитель тяжелой музыки и фронтэнда
Я бы добавил каждой карточке отступ справа, кроме последней.
Было бы что-то вроде:

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    margin-right: 25px;
}

.card:last-child {
   margin-right: 0;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
nyakove
@nyakove
А если проверку чуть модернизировать? Если количество карточек не делится без остатка на 3, то разбивать на блоки по 3 карточки, а остаток размещать по-другому.

Кроме того, если не обязательно привязываться к краю контейнера, есть отличное свойство
justify-content: space-evenly;
которое точно распределит карточки по всему контейнеру с одинаковыми расстояниями
Ответ написан
Ваш ответ на вопрос

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

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