Flexbox

Flexbox (от англ. Flexible Box Layout Module — «модуль гибкой компоновки») — это технология веб-вёрстки, предоставляющая набор CSS-свойств для одномерного распределения элементов в контейнере с возможностью управления их размерами, порядком и выравниванием. Flexbox позволяет создавать адаптивные макеты без использования float-ов, таблиц и сложных расчётов ширины, автоматически подстраиваясь под размер экрана или содержимого.

История

Модуль Flexbox был разработан рабочей группой CSS (CSS Working Group) для решения проблем, связанных с созданием гибких и предсказуемых макетов в одномерном пространстве (строка или столбец). До появления Flexbox для вёрстки сеток использовались таблицы, позиционирование и плавающие элементы (float), которые требовали громоздких обходных решений, особенно при создании адаптивных интерфейсов.

Первая черновая версия спецификации была опубликована в 2009 году. В 2011 году была выпущена черновая версия с префиксами (-webkit-), которая получила экспериментальную поддержку в браузерах. После нескольких итераций, учёта отзывов разработчиков и исправления ошибок, финальная версия спецификации (Flexbox Level 1) была рекомендована W3C (World Wide Web Consortium) в 2017 году.

Начиная с 2015 года все основные современные браузеры (Chrome, Firefox, Safari, Edge, Opera) обеспечивают полную поддержку Flexbox без префиксов. Модуль стал одним из стандартных инструментов для построения пользовательских интерфейсов и широко применяется в CSS-фреймворках, таких как Bootstrap 4 и 5, Tailwind CSS и Foundation.

Основные понятия

Flexbox основан на двух ключевых элементах: flex-контейнер (родительский элемент, к которому применяется свойство display: flex или display: inline-flex) и flex-элементы (дочерние элементы, расположенные внутри контейнера).

Оси Flexbox

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

Начало и конец осей

• Main start / Main end — начало и конец главной оси. Flex-элементы выстраиваются от main start к main end.
• Cross start / Cross end — начало и конец поперечной оси.

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

display

Активирует flex-контейнер. Значения:

• flex — блочный контейнер.
• inline-flex — строчно-блочный контейнер (занимает только ширину содержимого).

flex-direction

Определяет направление главной оси:

• row (по умолчанию) — слева направо.
• row-reverse — справа налево.
• column — сверху вниз.
• column-reverse — снизу вверх.

flex-wrap

Управляет переносом элементов на новую строку:

• nowrap (по умолчанию) — все элементы в одной строке.
• wrap — элементы переносятся при нехватке места.
• wrap-reverse — перенос в обратном направлении.

justify-content

Выравнивание по главной оси:

• flex-start — прижаты к началу.
• flex-end — прижаты к концу.
• center — по центру.
• space-between — равномерно с крайними элементами у границ.
• space-around — равномерно с половинными отступами по краям.
• space-evenly — равномерно с одинаковыми отступами.

align-items

Выравнивание по поперечной оси (для одной строки):

• stretch (по умолчанию) — растягивание на всю высоту.
• flex-start — прижаты к началу поперечной оси.
• flex-end — прижаты к концу.
• center — по центру.
• baseline — по базовой линии текста.

align-content

Выравнивание по поперечной оси при наличии нескольких строк (работает только при flex-wrap: wrap):

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly
• stretch

gap, row-gap, column-gap

Задают отступы между flex-элементами. Например, gap: 10px или row-gap: 5px; column-gap: 15px.

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

order

Изменяет порядок отображения элемента. По умолчанию 0. Элементы с меньшим значением order располагаются раньше. Может принимать отрицательные значения.

flex-grow

Коэффициент увеличения элемента при наличии свободного места. По умолчанию 0 (элемент не растёт). Если всем элементам задано flex-grow: 1, они занимают всё доступное пространство поровну.

flex-shrink

Коэффициент сжатия элемента при нехватке места. По умолчанию 1 (элементы сжимаются). Значение 0 запрещает сжатие.

flex-basis

Базовый размер элемента по главной оси до распределения свободного пространства. Может быть задан в пикселях, процентах или ключевых словах (auto, content). По умолчанию auto.

flex (сокращение)

Объединяет flex-grow, flex-shrink и flex-basis. Например:

• flex: 1 — эквивалентно flex: 1 1 0%.
• flex: auto — эквивалентно flex: 1 1 auto.
• flex: none — эквивалентно flex: 0 0 auto.

align-self

Переопределяет выравнивание для конкретного элемента по поперечной оси. Принимает те же значения, что и align-items.

margin: auto

Автоматические отступы (margin-left: auto, margin-right: auto и т. д.) в flex-контейнере работают особым образом: они «съедают» свободное пространство и позволяют прижать элемент к одной из сторон.

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

Центрирование элемента

``css .container { display: flex; justify-content: center; align-items: center; height: 200px; } ``

Равномерное распределение карточек

``css .cards { display: flex; flex-wrap: wrap; gap: 16px; } .card { flex: 1 1 200px; / растёт, сжимается, база 200px / } ``

Создание «липкого» футера

``css body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; / занимает всё оставшееся место / } ``

Преимущества и недостатки

Преимущества

• Простота создания адаптивных макетов без использования float и таблиц.
• Удобное управление выравниванием, порядком и распределением пространства.
• Поддержка всеми современными браузерами.
• Возможность изменения порядка элементов без изменения HTML-структуры.

Недостатки

• Flexbox ориентирован на одномерные макеты (строка или столбец). Для двумерных сеток (строки и столбцы одновременно) рекомендуется использовать CSS Grid Layout.
• В старых версиях браузеров (Internet Explorer 10-11) поддержка Flexbox была неполной и содержала ошибки (например, проблемы с flex-wrap и min-height).
• Сложные вложенные структуры могут привести к избыточному количеству контейнеров.

Сравнение с CSS Grid

Flexbox и CSS Grid — две технологии CSS для вёрстки, которые часто используются совместно. Основные различия:

На практике Flexbox чаще применяется для вёрстки меню, карточек, центрирования и простых компонентов, а Grid — для построения целостной сетки страницы.

Интересные факты

• Изначально Flexbox назывался «CSS Flexible Box Layout» и разрабатывался как альтернатива сложным табличным макетам.
• Свойство order позволяет визуально переставлять элементы, не меняя их порядок в DOM-дереве, что полезно для доступности (screen readers читают в исходном порядке).
• В ранних черновиках Flexbox использовались префиксы -webkit-, -moz-, -ms-, что требовало написания дублирующих правил для разных браузеров.

Источники

• W3C Specification: CSS Flexible Box Layout Module Level 1 (2017).
• MDN Web Docs: Flexbox.
• CSS-Tricks: A Complete Guide to Flexbox.
• Can I Use — таблицы совместимости браузеров.