• Теория
  • Теория

Верстаем список с justify-content

Мы задали карточкам ширину и внутренние отступы. Пока карточки выстроены сверху вниз, а нам нужно расположить их в ряд. Используем для этого флексы.

Макет списка карточек

Первая и последняя карточки в ряду должны прижиматься к границам контейнера, а свободное пространство нужно распределить равномерно между всеми карточками. Для этого подходит свойство justify-content со значением space-between.

Карточек в списке может быть много. Поэтому добавим ещё несколько штук в наш список и разрешим флекс-элементам переноситься на новую строку. Мы уже делали это, когда верстали навигацию.

Итак, превратим список карточек во флекс-контейнер и зададим ему выравнивание по главной оси. После этого добавим в список ещё пару карточек и, чтобы они не выпадали, сделаем флекс-контейнер многострочным.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Микросетки. Начало» тренажёра «Базовые механики построения сеток» можно после регистрации и оформления подписки.