CSS Flexbox для начинающих: практическое руководство с примерами

CSS Flexbox для начинающих — это практическое руководство, которое поможет уверенно использовать гибкие контейнеры для выравнивания, адаптивных рядов и базовой компоновки. Ниже — понятные объяснения, рабочие сниппеты и советы, которые применимы в ежедневной вёрстке.

Что такое Flexbox и когда его выбирать

Flexbox — это однорядная (или многострочная с переносом) система компоновки, оптимальная для одномерных задач: выравнивание по оси, распределение свободного места, равная высота карточек, навигационные панели. Для сложных двумерных сеток (строки и столбцы одновременно) лучше подходит CSS Grid, но в 80% интерфейсных задач вам хватит Flexbox.

Быстрый старт: свойства контейнера

Чтобы включить режим, объявите родителю display: flex. Дальше управляем направлением, переносом и отступами между элементами.

.container {
  display: flex;              /* включаем Flexbox */
  flex-direction: row;        /* row | row-reverse | column | column-reverse */
  flex-wrap: wrap;            /* nowrap | wrap | wrap-reverse */
  gap: 16px;                  /* безопасная замена "margin" между элементами */
}

Главная ось (main axis) задаётся flex-direction: при row — горизонталь, при column — вертикаль. Перенос по строкам включается через flex-wrap. gap аккуратно расставляет расстояния без отрицательных маргинов и псевдоэлементов.

Выравнивание по осям

• justify-content — выравнивание по главной оси (start, center, end, space-between, space-around, space-evenly).
• align-items — выравнивание по поперечной оси для всех элементов (stretch по умолчанию).
• align-content — выравнивание строк при flex-wrap: wrap.

.center-box {
  display: flex;
  justify-content: center; /* по главной оси */
  align-items: center;     /* по поперечной оси */
  min-height: 300px;
  background: #f6f7fb;
}

Для краткости можно использовать flex-flow:

.row-wrap { flex-flow: row wrap; }
.column-nowrap { flex-flow: column nowrap; }

Свойства элементов: grow, shrink, basis и шорткат flex

Поведение дочерних блоков управляется тремя параметрами:

• flex-grow — как элемент расширяется, когда есть свободное место (0 = не растёт, 1 = растёт).
• flex-shrink — как элемент сжимается, когда места не хватает (1 = может сжиматься).
• flex-basis — базовый размер (стартовая ширина/высота по главной оси).

Шорткат: flex: grow shrink basis.

/* Равные колонки */
.item { flex: 1 1 0; } /* все делят свободное место поровну */

/* Фиксированная сайдбар + резиновый контент */
.sidebar { flex: 0 0 280px; }
.content { flex: 1 1 auto; }

Важно: предпочитайте flex-basis вместо width для контроля размера по главной оси — это предсказуемее в гибких рядах.

Готовые паттерны на Flexbox

1) Центровка по вертикали и горизонтали

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

2) Шапка сайта с кнопкой справа

.header { display: flex; align-items: center; gap: 12px; }
.header__spacer { margin-left: auto; }

<header class="header">
  <a class="logo">Brand</a>
  <nav>...</nav>
  <div class="header__spacer"></div>
  <button>Войти</button>
</header>

3) Ряд карточек, который красиво переносится

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card { flex: 1 1 280px; } /* цель: 3-4 в ряд, на мобилках по одной */

4) Прилипший футер без позиционирования

html, body { height: 100%; }
body {
  min-height: 100svh;        /* учитывает динамические панели на мобильных */
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
footer { padding: 16px; background: #f1f3f5; }

Практический пример: лейаут «сайдбар + контент + виджет»

.layout { display: flex; gap: 24px; }
.sidebar { flex: 0 0 260px; }
.content { flex: 1 1 auto; min-width: 0; }   /* min-width:0 предотвращает вылезание текста */
.widget  { flex: 0 1 320px; }

@media (max-width: 1024px) {
  .layout { flex-wrap: wrap; }
  .widget { flex-basis: 100%; }
}

<div class="layout">
  <aside class="sidebar">...</aside>
  <main class="content">Длинный текст и таблицы</main>
  <section class="widget">Блок с промо</section>
</div>

Частые ошибки и как их избегать

• Текст «выпирает» из карточки. По умолчанию у flex-элементов min-width: auto, из-за чего длинный контент не сжимается. Решение: поставить min-width: 0 у проблемного элемента.
• Ширина через width вместо flex-basis. В гибких рядах используйте flex-basis — он корректнее учитывает алгоритм раскладки.
• Неожиданное растягивание по высоте. Значение align-items: stretch по умолчанию. Если нужно по контенту — ставьте align-items: flex-start или center на контейнере.
• Перемешивание визуального и DOM-порядка. Свойство order меняет визуальный порядок, но не порядок обхода клавиатурой и чтения скринридерами. Используйте аккуратно ради доступности.
• Отступы между элементами через margin. Предпочитайте gap: короче, безопаснее, меньше коллизий. Фоллбэк для очень старых браузеров — маргины на элементах и «-margins» на контейнере.
• Изображения «рвут» карточку. Не забывайте img { max-width: 100%; height: auto; } внутри гибких элементов.

Отладка Flexbox

• Включите Flex overlay в DevTools (Chrome/Firefox) — увидите оси, переносы и промежутки.
• Добавьте временно контуры: .debug * { outline: 1px dashed #cbd5e1; } для визуального контроля раскладки.
• Проверяйте с длинными текстами и узкими экранами — критично для реальной адаптивности.

Мини-шпаргалка по значениям

/* Контейнер */
.container { display:flex; flex-flow: row wrap; gap: 1rem; }
.container.center { justify-content:center; align-items:center; }
.container.between { justify-content: space-between; }

/* Элементы */
.flex-1 { flex: 1 1 0; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: 0 0 auto; }
.basis-300 { flex-basis: 300px; }
.shrink-0 { flex-shrink: 0; }

Что дальше изучать

Освоив базу Flexbox, добавляйте CSS Grid для сложных сеток, современную типографику и методологии (BEM). Лучший способ закрепить знания — сверстать реальный макет с нуля. Рекомендую практический курс: Прокачать Flexbox и вёрстку на практике — курс «Вёрстка сайта с нуля 2.0».

Итог

CSS Flexbox для начинающих — это быстрый путь к предсказуемому выравниванию и адаптивным интерфейсам. Используйте flex-basis вместо width, помните про min-width: 0, применяйте gap и проверяйте переносы — и ваши макеты будут собираться чисто и без «костылей».