Что такое CSS Flexbox и зачем он нужен
Flexbox — это способ управлять расположением элементов внутри блока. Одним измерением: либо строка, либо столбец.
Представь поднос с тарелками. Ты решаешь: расставить их вплотную или с промежутками, прижать к одному краю или по центру, выровнять по высоте. Flexbox — это именно такой инструмент. Берёшь родительский контейнер, включаешь display: flex — и его дочерние элементы начинают подчиняться твоим командам.
Всё делится на два уровня: свойства контейнера (родителя) и свойства элементов (детей).
Основные понятия Flexbox
Прежде чем смотреть на свойства — три понятия, без которых ничего не понятно:
Флекс-контейнер — родительский блок с display: flex.
Флекс-элемент — любой прямой потомок этого контейнера.
Главная ось — основное направление, вдоль которого расставляются элементы. По умолчанию — горизонталь (слева направо).
Поперечная ось — перпендикулярна главной. Если главная горизонтальная — поперечная вертикальная, и наоборот.
Это важно, потому что justify-content всегда работает по главной оси, а align-items — по поперечной. Когда меняешь flex-direction — оси меняются местами, и всё поведение переворачивается.
Свойства флекс-контейнера CSS
display — включить Flexbox
flex-direction — направление главной оси
flex-wrap — перенос элементов на новую строку
По умолчанию все элементы жмутся в один ряд, даже если не помещаются:
flex-flow — шорткат для direction + wrap
justify-content — выравнивание по главной оси
Самое используемое свойство. Отвечает на вопрос «как разместить элементы вдоль главной оси»:
align-items — выравнивание по поперечной оси
Работает в пределах одной строки:
align-content — распределение рядов по поперечной оси
Работает только при flex-wrap: wrap и когда строк больше одной:
gap — отступы между элементами
Работает чище, чем margin: не добавляет лишних отступов по краям контейнера:
Свойства флекс-элементов CSS
order — порядок отображения
По умолчанию у всех order: 0. Элементы с меньшим значением идут первыми:
flex-grow — коэффициент роста
Как много свободного пространства занять относительно других. По умолчанию 0 — не расти:
Важно: это не соотношение размеров элементов, а соотношение раздела свободного пространства. Разница тонкая, но критичная.
flex-shrink — коэффициент сжатия
Насколько быстро элемент уменьшается, если места не хватает:
flex-basis — базовый размер элемента
Начальный размер вдоль главной оси, до распределения свободного места:
flex — шорткат для grow + shrink + basis
Самое важное свойство элемента. Объединяет три сразу:
align-self — индивидуальное выравнивание по поперечной оси
Переопределяет align-items только для одного элемента:
Практические рецепты Flexbox
Идеальное центрирование — горизонтально и вертикально
Три строки — и элемент по центру. Именно за это верстальщики так любят флексбокс.
Прижать футер к низу страницы
Прижать кнопку к правому краю без лишней обёртки
Трюк с margin: auto внутри флексбокса гибче, чем justify-content: space-between — не нужна дополнительная обёртка.
Адаптивная сетка карточек без медиазапросов
На широком экране — несколько в ряд. На телефоне — каждая на всю ширину. Без единого медиазапроса.
Фиксированная боковая панель + растягивающийся контент
Flexbox — это то, что разделяет «я слышал про CSS» и «я умею вёрстку». Разберись с осями, justify-content и align-items — и 80% раскладок будут получаться с первого раза.
Если хочешь отработать всё на практике с нуля — бесплатный учебник.
Вопросы — в чате.