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

Рабочие паттерны

В каждом примере сверху — живой результат, ниже — код. Паттерны идут по возрастанию: от простого навбара до собранной мини-страницы.

1. Навбар: логотип слева, меню справа

justify-content: space-between разводит логотип и меню по краям, а align-items: center выравнивает их по вертикали.

.navbar {
  display: flex;
  justify-content: space-between; /* лого ← →  меню */
  align-items: center;            /* по центру по вертикали */
}
.navbar .menu {
  display: flex;
  gap: 16px;
}

2. Сетка карточек: flex-wrap + gap

Карточки стоят в ряд и автоматически переносятся на новую строку, когда не хватает ширины. gap задаёт промежутки и по горизонтали, и по вертикали.

.card-list {
  display: flex;
  flex-wrap: wrap; /* перенос на новую строку */
  gap: 12px;
}
.card {
  flex: 1 1 120px; /* растут, сжимаются, базовая ширина 120px */
}

3. Идеальное центрирование

Блок ровно по центру и по горизонтали, и по вертикали — двумя строками. justify-content: center центрирует по главной оси, align-items: center — по поперечной.

.hero {
  display: flex;
  justify-content: center; /* по горизонтали */
  align-items: center;     /* по вертикали */
  height: 140px;
}

4. Медиа-объект: аватар + текст

Аватар фиксированной ширины слева, текст занимает весь оставшийся простор благодаря flex: 1. Классика для комментариев и уведомлений.

.media {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.media__avatar {
  flex: 0 0 48px; /* не растёт, не сжимается, 48px */
}
.media__text {
  flex: 1; /* занимает весь остаток */
}

5. Sticky-footer: подвал всегда внизу

Страница — вертикальная колонка во всю высоту. main с flex: 1 растёт и выталкивает footer вниз, даже если контента мало. В превью высота ограничена для наглядности.

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* во всю высоту окна */
}
.site-main {
  flex: 1; /* растёт и прижимает footer вниз */
}