Flexbox — это технология CSS, которая навсегда изменила подход к вёрстке. До её появления мы мучились с float, clearfix и таблицами. Сегодня Flexbox — стандарт индустрии, который поддерживается во всех современных браузерах.
Что такое Flexbox и зачем он нужен?
Flexbox (Flexible Box Layout) — это модуль CSS, который позволяет создавать гибкие и адаптивные макеты без использования позиционирования и float. Главная идея — распределение свободного пространства между элементами контейнера.
Ключевые преимущества Flexbox:
- Вертикальное выравнивание, которое раньше было головной болью
- Автоматическое распределение пространства между элементами
- Изменение порядка элементов без правки HTML
- Идеальная адаптивность под любые экраны
- Простота создания сложных макетов
Основные концепции: ось и контейнер
Flexbox работает с двумя осями: главной (main axis) и поперечной (cross axis). Направление главной оси задаётся свойством flex-direction. По умолчанию это row (горизонтальная ось слева направо).
.container {
display: flex;
flex-direction: row; /* или column */
}
Свойства для родительского контейнера
justify-content — выравнивание по главной оси
Это свойство распределяет элементы вдоль главной оси. Самые популярные значения:
- flex-start — элементы прижаты к началу
- flex-end — элементы прижаты к концу
- center — элементы по центру
- space-between — равномерное распределение, первый и последний по краям
- space-around — равные отступы вокруг каждого элемента
- space-evenly — абсолютно равные отступы
align-items — выравнивание по поперечной оси
Отвечает за вертикальное выравнивание (при flex-direction: row):
- stretch — элементы растягиваются на всю высоту (по умолчанию)
- flex-start — прижаты к верхнему краю
- flex-end — прижаты к нижнему краю
- center — по центру вертикали
- baseline — по базовой линии текста
Свойства для дочерних элементов
flex-grow — коэффициент растяжения
Определяет, как элемент будет заполнять свободное пространство. Значение 0 — элемент не растёт. Значение 1 и выше — пропорциональное распределение.
flex-grow: 1; /* займёт всё доступное место */
}
.item:first-child {
flex-grow: 2; /* в два раза больше соседей */
}
flex-shrink — коэффициент сжатия
Противоположность flex-grow. Определяет, как элемент будет сжиматься при нехватке места. Значение 1 (по умолчанию) — сжимается. 0 — не сжимается никогда.
flex-basis — базовый размер
Задаёт желаемый размер элемента до распределения свободного пространства. Можно использовать px, %, auto.
.item {
flex: 1 1 200px; /* grow shrink basis */
}
align-self — индивидуальное выравнивание
Позволяет переопределить align-items для конкретного элемента.
Практические примеры
1. Идеальный центрированный блок
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
2. Адаптивная сетка карточек
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px;
/* минимум 300px, растягивается */
}
3. Липкий футер (footer всегда внизу)
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
Flexbox vs Grid: что выбрать?
Это частый вопрос. Простое правило: Flexbox для однонаправленных макетов (строки или колонки), Grid — для двумерных (сетки). Но они отлично работают вместе: Grid для общей структуры страницы, Flexbox для внутренних компонентов.
Шпаргалка на каждый день
- display: flex — включает flex-контекст
- flex-direction — направление оси (row/column)
- flex-wrap — перенос на новую строку (wrap/nowrap)
- justify-content — горизонтальное выравнивание
- align-items — вертикальное выравнивание
- gap — отступы между элементами (современный способ)
- flex: 1 — занять всё доступное место
Заключение: Flexbox — must-have навык для любого веб-разработчика. Он экономит часы вёрстки и делает код чище. Практикуйтесь на реальных макетах, и через неделю вы не сможете представить жизнь без него.