CSS Flexbox: полное руководство с примерами вёрстки
Практика3 минРедакция Innovialabs
Коротко
Flexbox раскладывает элементы вдоль одной оси: контейнер с display: flex управляет направлением, выравниванием и отступами, а элементы — тем, как они растягиваются и сжимаются.
Что такое Flexbox и когда он нужен
Flexbox — способ раскладки в CSS, который выстраивает элементы в одну линию: строку или колонку. Он подходит для навигации, кнопок в ряд, центрирования, карточек одинаковой высоты.
Включается одним свойством на родителе:
.container {
display: flex;
}
Родитель становится flex-контейнером, его прямые дети — flex-элементами. У Flexbox две оси: главная (по ней идут элементы) и поперечная (перпендикулярно ей).
Свойства контейнера
| Свойство | Что делает | Частые значения |
|---|---|---|
flex-direction | Направление главной оси | row, column, row-reverse, column-reverse |
flex-wrap | Перенос на новую строку | nowrap, wrap |
flex-flow | Сокращение для direction + wrap | row wrap |
justify-content | Выравнивание по главной оси | flex-start, center, space-between, space-around, space-evenly |
align-items | Выравнивание по поперечной оси | stretch, center, flex-start, flex-end, baseline |
align-content | Распределение строк при переносе | flex-start, center, space-between |
gap | Расстояние между элементами | 16px, 1rem 2rem |
Важно: при flex-direction: column оси меняются местами, и justify-content начинает работать по вертикали.
Свойства элементов
| Свойство | Что делает |
|---|---|
flex-grow | Какую долю свободного места забирает элемент (по умолчанию 0) |
flex-shrink | Насколько сжимается при нехватке места (по умолчанию 1) |
flex-basis | Исходный размер до распределения места |
flex | Сокращение: grow, shrink, basis |
align-self | Своё выравнивание по поперечной оси |
order | Порядок отображения |
Самые полезные сокращения:
flex: 1— элемент растягивается и делит место поровну с соседями;flex: none— не растёт и не сжимается;flex: 0 0 200px— фиксированная ширина 200px.
Типовые макеты
Навбар: логотип слева, меню справа
<header class="nav">
<a href="/" class="logo">Logo</a>
<nav class="menu">
<a href="/about">О нас</a>
<a href="/contacts">Контакты</a>
</nav>
</header>
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
}
.menu {
display: flex;
gap: 24px;
}
Центрирование блока
.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Блок встанет ровно посередине по обеим осям.
Ряд карточек
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 260px;
}
Каждая карточка стремится к ширине 260px, растягивается, чтобы занять ряд, и переносится, когда места не хватает. Карточки в одном ряду получают одинаковую высоту благодаря align-items: stretch по умолчанию.
Футер, прижатый к низу
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
main {
flex: 1;
}
main забирает всё свободное место, и футер остаётся внизу даже на короткой странице.
Частые ошибки
- Свойства не на том элементе.
justify-contentпишут на контейнер,flex: 1— на элемент. - Длинный текст ломает раскладку. У flex-элементов по умолчанию
min-width: auto, и длинное слово или таблица не дают элементу сжаться. Помогаетmin-width: 0. - Отступы через margin вместо
gap.gapне добавляет лишний отступ у крайних элементов. - Flexbox для двумерной сетки. Если нужно выравнивание и по строкам, и по колонкам, удобнее CSS Grid.
orderдля смены смысла. Он меняет только визуальный порядок, а клавиатура и скринридер идут по порядку в HTML.
Полное описание свойств есть на MDN.