Урок 25. Теория: Практические шаблоны Flexbox

Главная идея

Предыдущие уроки разбирали Flexbox «по деталям»: что делает justify-content, чем отличается align-items, как работает gap. Этот урок — про то, как из этих деталей собираются типовые конструкции интерфейса, которые встречаются почти на каждом сайте. Вместо того чтобы каждый раз придумывать раскладку заново, ты выучишь пять «рецептов» и будешь просто доставать нужный.

Пять рецептов этого урока

• Навбар — логотип слева, меню справа. Контейнер display: flex + justify-content: space-between + align-items: center.
• Сетка карточек — карточки в ряд, переносятся при нехватке места: flex-wrap: wrap + gap, у карточек — flex-basis.
• Идеальное центрирование — блок ровно по центру по обеим осям: justify-content: center + align-items: center.
• Медиа-объект — аватар/иконка слева, текст справа, текст занимает остаток: display: flex, у текста flex: 1.
• Sticky-footer — подвал всегда внизу, даже если контента мало: колонка flex-direction: column + min-height: 100vh + flex: 1 у main.

Как это работает: одна модель на все паттерны

Все пять рецептов опираются на одну и ту же модель: есть контейнер (ему мы пишем display: flex) и элементы внутри него. Контейнер задаёт направление главной оси (flex-direction: row по умолчанию или column) и распределяет элементы вдоль неё (justify-content) и поперёк (align-items). Меняется только то, какие значения мы подставляем.

Когда применять

Эти паттерны — рабочая лошадка любого интерфейса. Навбар нужен почти на каждой странице, центрирование — для модальных окон, заглушек и кнопок, медиа-объект — для комментариев, карточек пользователей и уведомлений, сетка карточек — для каталогов и лент, sticky-footer — для страниц с малым количеством контента (логин, 404, профиль), чтобы подвал не «прилипал» к середине экрана.

Базовый каркас мини-проекта

/* sticky-footer: вся страница — вертикальная колонка во всю высоту */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* main растёт и выталкивает footer вниз */
.site-main {
  flex: 1 0 auto;
}

/* навбар и список карточек — горизонтальные flex-контейнеры */
.navbar,
.card-list {
  display: flex;
  gap: 1rem;
}

/* карточки переносятся на новую строку при нехватке места */
.card-list {
  flex-wrap: wrap;
}