Что такое Flexbox CSS: полный гид по свойствам, примерам и шпаргалке

Что такое Flexbox CSS и зачем он нужен

Полное название — Flexible Box Layout Module. Flexbox CSS управляет расположением, размерами, выравниванием и отступами дочерних элементов внутри родительского блока. До его появления разработчики решали эти задачи через float, position: absolute или верстку таблицами (display: table). Все три метода требовали дополнительных приёмов: clearfix для обтекания, ручные отступы, нарушение семантики HTML.

Flexbox оптимален для UI-компонентов (кнопок, карточек, форм), горизонтальной навигации и любого выравнивания элементов. Он управляет блоками вдоль одной оси — горизонтальной или вертикальной. Когда нужна полноценная двумерная сетка, где строки и столбцы задаются одновременно, используют CSS Grid.

Хотите освоить веб-разработку с нуля — и сразу на реальных задачах? На курсе «Программирование: Уверенный старт» школьники пишут HTML, CSS и JavaScript с первого урока, создают проекты в портфолио и получают сертификат об обучении. Узнайте подробнее на странице курса.

История Flexbox: от черновика W3C до стандарта CSS3

Первый рабочий черновик Flexible Box Layout Module опубликовал консорциум W3C в 2009 году. До 2012 года существовало три несовместимых синтаксиса: старый 2009 года (display: box), промежуточный 2011 года (display: flexbox) и современный (display: flex). В 2012 году модуль вошёл в спецификацию CSS3, а в октябре 2017 года W3C присвоил статус Candidate Recommendation.

Сегодня глобальное покрытие браузерами — свыше 95%. Никакого отдельного подключения не требуется: display: flex работает в Chrome, Firefox, Safari, Edge и Opera без дополнительных настроек. Вендорные префиксы актуальны только для поддержки браузеров старше 2016 года.

Ключевые понятия: оси, контейнер и дочерние элементы

В Flexbox два участника: flex-контейнер (родительский элемент) и flex-элементы (его прямые дочерние блоки). Управление идёт в двух направлениях. Главная ось (main axis) — направление, вдоль которого выстраиваются элементы. Поперечная ось (cross axis) — перпендикуляр к ней. Направление обеих осей задаёт свойство flex-direction: по умолчанию главная ось горизонтальна, слева направо.

Свойства контейнера действуют на всех прямых потомков сразу. Свойства элемента позволяют задать поведение каждого блока в отдельности — перекрывая настройки контейнера.

Flex-контейнер: активация и зона влияния

Чтобы включить Flexbox в HTML-разметке, достаточно одного свойства у родителя:

.container {

display: flex; /* или inline-flex */

}

display: flex создаёт блочный контейнер — занимает всю доступную ширину строки. display: inline-flex — инлайн-контейнер: его ширина определяется содержимым, как у слова в тексте. Поведение дочерних элементов в обоих случаях идентично.

Важный нюанс: контейнер влияет только на прямых потомков первого уровня вложенности. Внуки и глубже остаются обычными блоками. Свойства CSS columns на flex-контейнер не действуют.

Flex-элементы: что меняется у дочерних объектов

Прямые потомки flex-контейнера становятся flex-элементами автоматически — без изменений в HTML. При этом float, clear и vertical-align для них игнорируются.

По умолчанию элементы выстраиваются вдоль главной оси в один ряд и сжимаются, чтобы уместиться в контейнер. Ширина каждого определяется его содержимым — если не задать иначе через flex-grow, flex-basis или явные размеры.

Шпаргалка Flexbox CSS: все 14 свойств

Все свойства делятся на две группы: 8 для контейнера — управляют всеми потомками сразу; 6 для элемента — задают поведение конкретного блока. Шпаргалка ниже поможет быстро найти нужное свойство во время вёрстки, не переключаясь на документацию.

Свойства flex-контейнера (8 свойств)

flex-direction задаёт направление главной оси и порядок расположения элементов: row (слева направо, значение по умолчанию), row-reverse (справа налево), column (сверху вниз), column-reverse (снизу вверх).

flex-wrap определяет, что произойдёт, когда элементы не умещаются в одну строку: nowrap (по умолчанию — все в одну строку, могут выходить за край), wrap (перенос на следующую строку сверху вниз), wrap-reverse (перенос снизу вверх).

flex-flow — сокращение (шортхенд) для пары flex-direction + flex-wrap. Пример: flex-flow: row wrap. Порядок важен: сначала direction, потом wrap.

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

align-items выравнивает элементы вдоль поперечной оси в рамках строки: stretch (растягиваются по высоте контейнера, по умолчанию), flex-start, flex-end, center, baseline.

align-content управляет распределением строк при многострочном Flexbox. Работает только при двух условиях одновременно: включён flex-wrap: wrap (или wrap-reverse) и строк минимум две. Если строка одна — свойство не даёт видимого эффекта. Это ожидаемое поведение по спецификации, а не баг.

gap (а также row-gap и column-gap) задаёт отступы между flex-элементами. Ключевое отличие от margin: gap не добавляет отступ у внешних краёв контейнера.

Свойства flex-элементов (6 свойств)

order задаёт порядок отображения элемента без изменения DOM-структуры HTML. По умолчанию — 0. Принимает отрицательные числа: элемент с order: -1 встанет раньше всех остальных с order: 0.

flex-grow — коэффициент растяжения при наличии свободного места в контейнере. По умолчанию — 0 (элемент не растягивается). Если всем трём элементам задать flex-grow: 1, они равномерно займут всё пространство. Если среднему задать flex-grow: 2 — он получит вдвое больше, чем крайние. Отрицательные значения не поддерживаются.

flex-shrink — коэффициент сжатия при нехватке места. По умолчанию — 1 (элемент сжимается пропорционально). flex-shrink: 0 запрещает сжатие.

flex-basis — базовый размер элемента до распределения свободного пространства. Имеет приоритет выше width (для горизонтального направления) и height (для вертикального). По умолчанию — auto.

flex — шортхенд для flex-grow, flex-shrink и flex-basis сразу. Рекомендован вместо трёх отдельных свойств: браузер устанавливает недостающие значения по спецификации, а не по начальным defaults. Пример: flex: 1 разворачивается в flex: 1 1 0.

align-self — индивидуальное выравнивание по поперечной оси. Переопределяет align-items контейнера для конкретного элемента. Принимает те же значения: auto, flex-start, flex-end, center, baseline, stretch.

Практические примеры кода Flexbox CSS

Три паттерна ниже покрывают около 80% задач, с которыми сталкиваются при вёрстке: идеальное центрирование, горизонтальная навигация с адаптивными карточками и трёхколоночный макет страницы. Каждый — рабочий код, который можно скопировать и адаптировать сразу.

Идеальное центрирование: margin:auto и justify-content:center

Flexbox даёт два чистых способа отцентрировать элемент по обеим осям одновременно.

Способ 1 — margin: auto. Когда flex-элементу задать margin: auto, он поглощает всё свободное пространство контейнера и по горизонтали, и по вертикали:

.parent {

display: flex;

height: 300px;

}

.child {

margin: auto;

}

Способ 2 — justify-content + align-items:

.parent {

display: flex;

justify-content: center;

align-items: center;

height: 300px;

}

Первый способ удобен при одном дочернем элементе. Второй — когда элементов несколько и нужно выровнять их группу целиком. Оба работают без фиксированных размеров у дочернего элемента.

Горизонтальная навигация и адаптивная сетка карточек

Навигация с пунктами у противоположных краёв — одна из самых частых задач в вёрстке:

.nav {

display: flex;

justify-content: space-between;

}

Первый пункт прижимается к левому краю, последний — к правому, между остальными — равные промежутки. Без дополнительных отступов и позиционирования.

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

.cards {

display: flex;

flex-wrap: wrap;

gap: 16px;

}

.card {

flex-grow: 1;

flex-basis: 280px;

}

При сужении экрана карточки переносятся на новую строку автоматически. Минимальная ширина — 280px; дальше flex-grow: 1 распределяет остаток пространства равномерно между всеми элементами в строке.

Holy Grail Layout: трёхколоночный макет с хедером и футером

Классический паттерн «шапка / (боковая панель + контент + боковая панель) / подвал» — около 20 строк CSS:

<div class=»wrapper»>

<header>Шапка</header>

<div class=»middle»>

<aside>Панель</aside>

<main>Контент</main>

<aside>Панель</aside>

</div>

<footer>Подвал</footer>

</div>

.wrapper { display: flex; flex-direction: column; min-height: 100vh; }

.middle { display: flex; flex: 1; }

main { flex: 2 0px; }

aside { flex: 1 0px; }

Свойство order позволяет переставить колонки в другом визуальном порядке независимо от их DOM-порядка — удобно, когда источник данных задаёт жёсткую HTML-структуру.

Адаптивные макеты с Flexbox в HTML

Связка Flexbox и @media-запросов — основа современной адаптивной вёрстки. Базовый паттерн: на мобайле элементы складываются в колонку, на десктопе выстраиваются в ряд:

.container {

display: flex;

flex-direction: column;

}

@media (min-width: 768px) {

.container {

flex-direction: row;

}

}

flex-wrap: wrap позволяет частично обойтись без медиазапросов. Задайте flex-basis с минимальным значением — и карточки сами переносятся на новую строку при нехватке места, сохраняя пропорции без единого брейкпоинта.

Sticky footer — подвал, который всегда прилипает к низу экрана вне зависимости от объёма контента:

.wrapper {

display: flex;

flex-direction: column;

min-height: 100vh;

}

main {

flex-grow: 1;

}

flex-grow: 1 у основного блока растягивает его на всё оставшееся пространство — подвал остаётся внизу без position: fixed и без лишних хаков.

Адаптивная навигация с тремя брейкпоинтами (контрольными точками изменения макета):

.nav { display: flex; flex-direction: column; }

@media (min-width: 480px) { .nav { flex-direction: row; justify-content: space-around; } }

@media (min-width: 960px) { .nav { justify-content: flex-end; } }

На узком экране пункты идут вертикально. На планшете — горизонтально с равными промежутками. На десктопе — выровнены по правому краю.

Flexbox или CSS Grid — что выбрать

Главное различие: Flexbox управляет элементами вдоль одной оси — ряда ИЛИ столбца. CSS Grid управляет двумя осями одновременно: строками И столбцами. Это не конкуренция — оба метода дополняют друг друга. Типичная схема: Grid задаёт каркас страницы, Flexbox выравнивает элементы внутри ячеек этого каркаса.

float и position использовались для построения макетов до появления Flexbox и Grid. Оба требуют дополнительных приёмов — clearfix, отрицательные отступы. Верстка таблицами (display: table) нарушает семантику HTML и усложняет поддержку кода. Все три подхода считаются устаревшими для построения интерфейсных макетов.

Браузерная поддержка и вендорные префиксы

Современный синтаксис display: flex работает во всех актуальных браузерах без дополнительных настроек. Исторически существовало три версии синтаксиса: старый 2009 года (display: box), промежуточный 2011 года (display: flexbox) и современный с 2012 года (display: flex). Для поддержки браузеров до 2016 года добавляют вендорные префиксы.

Рекомендованный способ — Autoprefixer, PostCSS-плагин (дополнение к сборщику CSS): он автоматически добавляет -webkit-, -moz-, -ms- на основе конфигурационного файла .browserslistrc. Поддерживать список префиксов вручную не нужно. Известные проблемы реализации Flexbox в разных браузерах собраны в открытом репозитории Flexbugs на GitHub — там же описаны проверенные обходные решения.

Тренажёры и инструменты для изучения Flexbox CSS

Flexbox проще всего понять через практику, а не через чтение документации.

Chrome DevTools (инструменты разработчика браузера Chrome): нажмите F12, откройте вкладку Elements и найдите элемент с display: flex — рядом с ним появится значок flex. Кликните по нему — увидите пунктирные границы flex-элементов и штриховку, обозначающую gap. Вкладка Layout позволяет выбрать цвет подсветки; в панели Styles откройте Flexbox Editor — визуальный редактор пяти ключевых свойств прямо в браузере без правки кода вручную.

Flexbox Froggy — браузерная игра: с помощью CSS нужно расставить лягушек на листья лотоса. 28 уровней с нарастающей сложностью, бесплатно, есть подсказки на каждом уровне, интерфейс переведён на русский. Flexbox Defense — похожая игра в формате башенной защиты, задания сложнее. Flex Box Adventure — 24 миссии с персонажем Артуром, регулируемая сложность.

MDN Web Docs — официальная документация с интерактивными примерами кода и таблицами совместимости для каждого свойства Flexbox.

Часто задаваемые вопросы

Что такое Flexbox в CSS?

Flexbox CSS (Flexible Box Layout Module — гибкая блочная модель) — модуль CSS3 для управления расположением, размерами и выравниванием элементов внутри контейнера. Принят консорциумом W3C в 2012 году как часть CSS3, статус Candidate Recommendation — с октября 2017 года. Активируется свойством display: flex.

Чем display:flex отличается от display:inline-flex?

Оба включают Flexbox и одинаково управляют дочерними элементами. Разница — в поведении самого контейнера: display: flex занимает всю ширину строки (блочный), display: inline-flex — только ширину своего содержимого (инлайн), как обычное слово в тексте.

Чем justify-content отличается от align-items?

justify-content выравнивает элементы вдоль главной оси (по умолчанию — горизонталь). align-items — вдоль поперечной оси (вертикаль при flex-direction: row). Чтобы задать индивидуальное выравнивание одному элементу — используйте align-self: оно переопределяет align-items для конкретного потомка.

Как центрировать элемент по вертикали и горизонтали?

Два способа. Первый: задать контейнеру display: flex, а дочернему элементу — margin: auto. Второй: задать контейнеру display: flex; justify-content: center; align-items: center. Первый удобен при одном дочернем элементе, второй — когда элементов несколько.

Почему не работает align-content?

align-content требует двух условий: у контейнера должен быть включён перенос — flex-wrap: wrap или wrap-reverse — и строк должно быть минимум две. Если строка одна, свойство не даёт видимого эффекта. Это ожидаемое поведение по спецификации W3C, а не баг.

Как работает flex-grow и зачем он нужен?

flex-grow определяет, какую долю свободного пространства контейнера получит элемент. flex-grow: 1 у всех потомков — место делится поровну. Если одному задать flex-grow: 2 — он получит вдвое больше соседей с flex-grow: 1. Значение 0 (по умолчанию) — элемент не растягивается.

Чем Flexbox отличается от CSS Grid?

Flexbox управляет элементами по одной оси — рядуили столбцу. CSS Grid — по двум осям одновременно: строкам и столбцам. Практическое правило: Flexbox для компонентов и выравнивания, Grid для каркаса страницы с явной двумерной сеткой. Они дополняют, а не заменяют друг друга.

Что такое Flexbox Froggy и как с ним практиковаться?

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

Как сделать адаптивную сетку карточек без media queries?

Задайте контейнеру display: flex; flex-wrap: wrap и gap, а каждой карточке — flex-grow: 1 и flex-basis с минимальным значением (например, 280px). При уменьшении ширины экрана карточки автоматически переносятся на новую строку, сохраняя пропорции без единого брейкпоинта.

Зачем использовать Autoprefixer при работе с Flexbox?

Autoprefixer — PostCSS-плагин, который автоматически добавляет вендорные префиксы (-webkit-, -moz-, -ms-) к CSS-свойствам на основе целевого списка браузеров. Это избавляет от ручного поддержания совместимости. Альтернатива для Sass (препроцессора CSS) — @mixin с ручным перечислением префиксов.