Полное руководство по CSS Flexbox

Открытый MacBook с сайтом, где продукты отображены плитками

Flexbox (Flexbox Layout) — это модель компоновки в CSS, предназначенная для выравнивания элементов в одном измерении: по основной оси (main axis) и по поперечной оси (cross axis). Определение: основная ось — направление, в котором располагаются элементы (ряд или колонка); поперечная ось — перпендикулярное направление.

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

Как настроить display: flex

Минимальная структура для изучения Flexbox — родительский контейнер и несколько дочерних блоков. Пример HTML-структуры:

Чтобы контейнер стал flex-контейнером, добавьте свойство display: flex к родителю:

.parent {  
  display: flex;  
}

Без display: flex дочерние div идут друг за другом по умолчанию в потоке документа (как блоки один под другим). Flex включает механизм распределения места и выравнивания вдоль двух осей.

Примечание: display: inline-flex делает контейнер строчным, но сохраняет поведение flex для детей.

Как управлять направлением расположения элементов

Свойство flex-direction определяет направление основной оси и, соответственно, порядок и расположение элементов.

Примеры направления flex-direction: ряд и колонка

Варианты:

flex-direction: row | column | row-reverse | column-reverse

Пример HTML:

CSS для элементов (цвета и размеры):

.red { background-color:red; }  
.orange { background-color: orange; }  
.yellow { background-color: yellow; }  
.green { background-color: green;}  
.blue { background-color: blue; }  
.purple { background-color: purple; }  

.parent div {  
 width: 40px;  
 height: 40px;  
}

Примените flex-direction к родителю:

.parent {  
 width: 300px;  
 display: flex;   
 flex-direction: row;  
}

Хитрость для понимания: многие свойства Flexbox ссылаются на «основную ось» и «поперечную ось». При flex-direction: row основная ось — горизонталь, поперечная — вертикаль. При column — наоборот.

Когда использовать:

row — стандартная горизонтальная панель навигации или карточки в строке;
column — вертикальные панели, карточки в столбце;
reverse — когда нужен обратный визуальный порядок без изменения DOM.

Как выравнивать элементы по поперечной оси

Свойство align-items управляет выравниванием элементов вдоль поперечной оси (для flex-direction: row — это вертикаль).

Примеры выравнивания align-items

Варианты:

align-items: flex-start | flex-end | center | baseline | stretch

Пример использования:

.parent {  
  display: flex;   
  align-items: flex-start;  
}

align-items: baseline выравнивает элементы по их текстовой базовой линии. Для наглядности задайте разные высоты для элементов:

Когда align-items: stretch, элементы растягиваются на всю доступную высоту (или ширину, если flex-direction: column).

Совет: если элементы содержат тексты и вам нужно точное выравнивание строк, используйте baseline; для центровки используйте center.

Как переопределить выравнивание у отдельного элемента

Свойство align-self даёт контроль над отдельным элементом, перекрывая align-items родителя.

Пример align-self: один элемент по центру

Варианты:

align-self: auto | flex-start | flex-end | center | baseline | stretch

Пример: родитель в строке, один элемент центрирован:

.parent {  
  display: flex;   
  flex-direction: row;  
}

align-self полезно для отдельных компонент, когда нужно нарушить покрывающую настройку родителя (например, выделить CTA-кнопку посередине).

Как распределять строки по поперечной оси

Свойство align-content управляет распределением свободного пространства между строками (когда элементы переносятся на несколько строк).

Примеры align-content: распределение строк

Варианты:

align-content: flex-start | flex-end | center | stretch | space-between | space-around

Важно: align-content работает только при наличии нескольких строк. Для этого установите flex-wrap: wrap и уменьшите ширину контейнера:

.parent {  
  flex-wrap: wrap;  
  display: flex;  
  align-content: flex-start;  
  width: 180px;  
}

Когда применять: используйте align-content при создании сеток из карточек или плиток, где элементы автоматически переносятся на новые строки.

Как выравнивать элементы по основной оси

justify-content управляет распределением элементов по основной оси (например, по горизонтали при flex-direction: row).

Примеры justify-content: начальное, центр, пространство и т. д.

Варианты:

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

Пример:

HTML:

CSS:

.red { background-color: red; }  
.green { background-color: lightgreen; }  
.blue { background-color: blue; }

.parent {  
 width: 300px;  
 display: flex;   
 justify-content: flex-start;  
}

Дополнительно: спецификация CSS Box Alignment добавляет значения start, end, left, right и ключевое слово safe. Некоторые значения могут быть не полностью поддержаны старыми браузерами.

safe предотвращает выход слов или элементов за границы контейнера при центрировании длинных слов — это полезно для предотвращения обрезки текста.

.parent {  
 display: flex;   
 justify-content: safe center;  
}

Проверьте поддержку браузеров на сайтах с таблицами совместимости (например, Can I use).

Как задать отступы между элементами (gap)

Свойство gap (ранее grid-gap) теперь поддерживается в flex-контейнерах и упрощает создание промежутков между элементами.

Пример gap в flex-контейнере

Пример:

.parent {  
  display: flex;  
  gap: 70px;  
}

Если gap заставляет суммарную ширину элементов превышать ширину контейнера, элементы могут сжаться (если задан flex-shrink) или перенестись (если flex-wrap: wrap).

.parent {   
    width: 300px;  
    gap: 120px;  
}

.parent {   
    width: 300px;  
    flex-wrap: wrap;  
    gap: 120px;  
}

Также доступны row-gap и column-gap для раздельного управления вертикальными и горизонтальными промежутками.

.parent {   
    row-gap: 120px;   
}  
.parent {   
    column-gap: 120px;   
}

Совет: gap делает код чище, чем использование margin у дочерних элементов, и предотвращает ошибки с зацеплением соседних margin (margin collapse).

Расширенные приёмы и шаблоны использования

Центрирование по вертикали и горизонтали одной строкой:

.parent {  
 display: flex;  
 align-items: center;  
 justify-content: center;  
}

Автоматическое заполнение пространства кнопками:

.button {  
 flex: 1 1 auto; /* растягивается и сжимается по необходимости */
}

Перекладывание визуального порядка без изменения DOM:

.item { order: 2; }
.item--first { order: 0; }

order управляет порядком расположения, но не изменяет порядок в DOM (важно для доступности и таб-порядка).

Когда Flexbox не подходит или даёт сбой

Для сложных двумерных сеток (и когда нужен контроль на уровне строк и столбцов) скорее использовать CSS Grid.
Если нужен точный контроль над высотой колонок и выравниванием элементов в двух измерениях — Grid удобнее.
Для старых браузеров (IE11) некоторые свойства могут работать не так, как ожидается (например, gap в flex не поддерживался в IE).

Примеры ошибок:

Элементы не переносятся, потому что flex-wrap не установлен.
align-content кажется не работающим — вероятно, потому что контейнер имеет одну строку.
Неконтролируемые отступы — конфликт margin у детей вместо gap.

Мини-методология внедрения Flexbox в проект

Определите, нужен ли один измеримый поток (Flexbox) или двумерная сетка (Grid).
На уровне компонента создайте flex-контейнер и проверьте поведение в нескольких размерах экрана.
Применяйте gap вместо внешних margin, где это уместно.
Используйте align-self для исключений, а не меняйте align-items глобально.
Проверяйте поведение в нескольких браузерах и на мобильных ширинах.

Контрольный список перед деплоем

Установлен display: flex на родителе
flex-direction соответствует дизайну
justify-content и align-items покрывают нужные сценарии
gap используется вместо margin для промежутков
flex-wrap задан, если ожидается перенос
order не ломает таб-порядок и порядок в DOM
Тестирование в основных браузерах и на мобильных устройствах

Частые ошибки и как их исправить

Проблема: контейнер кажется «высоким» или «низким». Решение: проверьте align-items и высоты дочерних элементов.
Проблема: элементы не переносится. Решение: добавьте flex-wrap: wrap; задайте ограничения по ширине.
Проблема: gap не работает в старых браузерах. Решение: использовать margin у дочерних элементов как запасной вариант и предоставлять fallbacks.

Матрица совместимости (упрощённо)

Свойство	Современные браузеры	IE11
display: flex	Да	Ограниченно
gap в flex	Поддерживается в современных версиях	Не поддерживается
flex-wrap	Да	Да
align-content	Да	Да
safe keyword для justify-content	Частично	Нет

Примечание: для детальной таблицы совместимости обращайтесь к актуальным ресурсам (Can I use).

Диаграмма принятия решения (Mermaid)

flowchart TD
  A[Нужна одна ось?] -->|Да| B[Используйте Flexbox]
  A -->|Нет| C[Рассмотрите CSS Grid]
  B --> D{Нужны строки и столбцы одновременно?}
  D -->|Да| C
  D -->|Нет| E[Flexbox: настройте方向, выравнивание, gap]
  E --> F[Протестируйте в браузерах]

Роль-фокусированные чеклисты

Для верстальщика:
- Проверить базовые стили display, flex-direction, gap.
- Не использовать order для визуального изменения порядка, если важен DOM-порядок.
Для фронтенд-разработчика:
- Писать модульные классы: .layout–row, .layout–center и т. п.
- Добавлять fallbacks для старых браузеров, если проект этого требует.
Для дизайнера:
- Уточнить поведение при переполнении текста и при переполнении по ширине.
- Указать допустимые минимальные и максимальные размеры для карточек.

Критерии приёмки

Элементы корректно центрируются на экранах 320px, 768px, 1366px.
При уменьшении ширины карточки не ломается текст и не теряются буквы (safe/overflow проверен).
Табличные данные и формы выровнены согласно дизайну.

Набор тестов и приёмочных критериев

Центрирование: контейнер с тремя элементами должен быть визуально в центре при justify-content: center и align-items: center.
Перенос: при flex-wrap: wrap элементы должны перейти на следующую строку при уменьшении ширины.
Gap: заданный gap должен сохраняться между элементами и строками.
Baseline: при align-items: baseline строки текста выравниваются по базовой линии.

Краткая глоссарий (1 строка — термин)

Flexbox: модель компоновки для одномерного потока элементов.
Main axis: основная ось, направление размещения элементов (row/column).
Cross axis: поперечная ось, перпендикулярная основной.
Gap: расстояние между элементами внутри flex-контейнера.

Заключение

Flexbox — мощный инструмент для управления компоновкой в одном измерении. Он прост в базовой настройке и гибок для большинства интерфейсных задач: центровки, распределения пространства и создания адаптивных рядов/колонок. В сложных двумерных макетах комбинируйте Flexbox с Grid или выбирайте Grid целиком. Всегда тестируйте на целевых устройствах и учитывайте совместимость браузеров.

Важно: начните с маленького компонента, отработайте поведение в разных состояниях и только затем масштабируйте паттерн в проект. Если нужно — используйте контрольный список из раздела «Контрольный список перед деплоем».

Ниже — краткая подборка ссылок (поисковый запрос): Can I use flexbox, CSS Box Alignment, MDN flexbox guide.