Полный гайд по Flexbox: как создавать адаптивные макеты на CSS

1 месяц назад ●

0 комментариев

●

Полный гайд по Flexbox: как создавать адаптивные макеты на CSS

Содержание показать

Flexbox (Flexible Box Layout) — это мощная система компоновки элементов в CSS, которая позволяет легко и эффективно управлять расположением, выравниванием и распределением пространства между элементами в контейнере, даже если их размер неизвестен или динамически изменяется.

Flexbox идеально подходит для создания адаптивных сеток, навигации, карточек, хедеров, футеров и любых других компонентов, где важна гибкость.

Почему Flexbox? Проблема, которую он решает

До появления Flexbox верстальщики использовали:

float
inline-block
table-cell
position

Но эти методы имели множество ограничений:

Сложно центрировать по вертикали
Трудно контролировать порядок элементов
Зависимость от размера родителя
Неудобная работа с динамическим контентом

Flexbox решил эти проблемы, став стандартом современной вёрстки.

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

Flexbox работает с двумя уровнями:

Контейнер (flex container)
Элементы (flex items)

CSS

.flex-container {
    display: flex; /* делает элемент контейнером */
}

.flex-container {
    display: flex; /* делает элемент контейнером */
}

HTML

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
</div>

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
</div>

Теперь все .flex-item становятся гибкими элементами внутри контейнера.

Свойства контейнера (parent)

1. `display: flex`

Создаёт flex-контейнер.

Внутренние элементы становятся одной строкой по умолчанию.

2. `flex-direction` — направление оси

Определяет основную ось (main axis).

Значение	Описание
`row` (по умолчанию)	Слева направо (для ltr)
`row-reverse`	Справа налево
`column`	Сверху вниз
`column-reverse`	Снизу вверх

CSS

.container {
    flex-direction: column;
}

.container {
    flex-direction: column;
}

Пример: вертикальное меню

3. `flex-wrap` — перенос строк

По умолчанию все элементы пытаются поместиться в одну строку.

Значение	Описание
`nowrap` (по умолчанию)	Все элементы в одной строке
`wrap`	Переносятся на следующую строку при нехватке места
`wrap-reverse`	Перенос снизу вверх

CSS

.container {
    flex-wrap: wrap;
}

.container {
    flex-wrap: wrap;
}

Идеально для сетки карточек.

4. `flex-flow` — краткая запись

Сокращение для flex-direction + flex-wrap.

CSS

.container {
    flex-flow: row wrap;
}

.container {
    flex-flow: row wrap;
}

5. `justify-content` — выравнивание по основной оси

Управляет распределением пространства между и вокруг элементов по основной оси.

Значение	Описание
`flex-start`	По левому краю (по умолчанию)
`flex-end`	По правому краю
`center`	По центру
`space-between`	Равные промежутки между элементами
`space-around`	Равные промежутки вокруг элементов
`space-evenly`	Равные промежутки между и по краям

CSS

.container {
    justify-content: space-between;
}

.container {
    justify-content: space-between;
}

Пример: хедер с логотипом слева и меню справа.

6. `align-items` — выравнивание по поперечной оси

Выравнивает элементы по высоте (если flex-direction: row).

Значение	Описание
`stretch` (по умолчанию)	Растягивает по высоте контейнера
`flex-start`	По верхнему краю
`flex-end`	По нижнему краю
`center`	По центру
`baseline`	По базовой линии текста

Пример: вертикальное центрирование кнопки и текста.

7. `align-content` — выравнивание нескольких строк

Работает только при flex-wrap: wrap. Аналогично justify-content, но для строк.

Значение	Описание
`stretch`	Растягивает строки
`flex-start`, `flex-end`, `center`	Выравнивание строк
`space-between`, `space-around`	Промежутки между строками

CSS

.container {
    align-content: center;
}

.container {
    align-content: center;
}

Свойства элементов (children)

1. `order` — порядок элементов

Меняет порядок отображения элементов.

CSS

.item-1 { order: 2; }
.item-2 { order: 1; }

.item-1 { order: 2; }
.item-2 { order: 1; }

.item-2 будет первым, несмотря на положение в HTML.

Полезно для адаптивности: на мобильных менять порядок блоков.

2. `flex-grow` — растяжение

Определяет, насколько элемент может расти, если есть свободное пространство.

CSS

.item-1 { flex-grow: 1; }
.item-2 { flex-grow: 2; }

.item-1 { flex-grow: 1; }
.item-2 { flex-grow: 2; }

.item-2 займёт вдвое больше места, чем .item-1.

Пример: двухколоночный макет, где правая колонка шире.

3. `flex-shrink` — сжатие

Определяет, насколько элемент может сжаться, если не хватает места.

CSS

.item { flex-shrink: 0; } /* Не сжимается */

.item { flex-shrink: 0; } /* Не сжимается */

Используется, чтобы запретить сжатие изображений или кнопок.

4. `flex-basis` — базовый размер

Задаёт начальный размер элемента до распределения свободного пространства.

CSS

.item {
    flex-basis: 200px;
}

.item {
    flex-basis: 200px;
}

Элемент начинается с 200px, затем применяется grow/shrink.

`flex` — краткая запись

Сокращение: flex: <grow> <shrink> <basis>

CSS

.item {
    flex: 1 1 200px; /* grow=1, shrink=1, basis=200px */
}

.item {
    flex: 1 1 200px; /* grow=1, shrink=1, basis=200px */
}

Часто используемые значения:

flex: 1 → 1 1 0 — растягивается, сжимается, база = 0
flex: auto → 1 1 auto — растягивается, сжимается, база = содержимое
flex: none → 0 0 auto — не растягивается, не сжимается

Практические примеры

Пример 1: Центрирование по центру (горизонтально и вертикально)

CSS

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

HTML

<div class="center">
    <p>Я по центру!</p>
</div>

<div class="center">
    <p>Я по центру!</p>
</div>

Лучший способ центрирования в CSS!

Пример 2: Навигация с логотипом слева, меню справа

CSS

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

HTML

<header class="header">
    <div class="logo">Logo</div>
    <nav class="menu">
        <a href="#">Главная</a>
        <a href="#">Блог</a>
        <a href="#">Контакты</a>
    </nav>
</header>

<header class="header">
    <div class="logo">Logo</div>
    <nav class="menu">
        <a href="#">Главная</a>
        <a href="#">Блог</a>
        <a href="#">Контакты</a>
    </nav>
</header>

Пример 3: Карточки в сетке

CSS

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.card {
    flex: 1 1 300px; /* Минимум 300px, может расти */
    background: var(--secondary-bg);
    border-radius: 8px;
    padding: 1rem;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.card {
    flex: 1 1 300px; /* Минимум 300px, может расти */
    background: var(--secondary-bg);
    border-radius: 8px;
    padding: 1rem;
}

HTML

<div class="cards">
    <div class="card">Карточка 1</div>
    <div class="card">Карточка 2</div>
    <div class="card">Карточка 3</div>
</div>

<div class="cards">
    <div class="card">Карточка 1</div>
    <div class="card">Карточка 2</div>
    <div class="card">Карточка 3</div>
</div>

Адаптивная сетка без media запросов!

Пример 4: Фиксированная ширина + растягиваемый блок

CSS

.layout {
    display: flex;
    height: 100vh;
}

.sidebar {
    width: 250px;
    background: #f0f0f0;
}

.content {
    flex: 1; /* Занимает всё оставшееся место */
    padding: 1rem;
}

.layout {
    display: flex;
    height: 100vh;
}

.sidebar {
    width: 250px;
    background: #f0f0f0;
}

.content {
    flex: 1; /* Занимает всё оставшееся место */
    padding: 1rem;
}

HTML

<div class="layout">
    <aside class="sidebar">Меню</aside>
    <main class="content">Основной контент</main>
</div>

<div class="layout">
    <aside class="sidebar">Меню</aside>
    <main class="content">Основной контент</main>
</div>

Flexbox vs CSS Grid

Flexbox	CSS Grid
Одномерная (строка ИЛИ столбец)	Двумерная (строки И столбцы)
Идеален для списков, навигации	Для сложных сеток и макетов
Гибкость по одному направлению	Полный контроль над сеткой
Лучше для компонентов	Лучше для страниц

Используйте Flexbox для компонентов
Используйте Grid для общей разметки страницы

Советы и лайфхаки

1. Установите `min-width: 0` для flex-элементов

Иначе они могут не сжиматься:

CSS

.flex-item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flex-item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

2. Избегайте `width: 100%` внутри flex

Он может сломать поведение flex.

Вместо:

CSS

.item { width: 100%; }

.item { width: 100%; }

Лучше:

CSS

.item { flex: 1; }

.item { flex: 1; }

3. Проверяйте в разных браузерах

Flexbox хорошо поддерживается, но старые версии требуют префиксов.

Полный гайд по Flexbox: как создавать адаптивные макеты на CSS

Почему Flexbox? Проблема, которую он решает

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

Свойства контейнера (parent)

1. display: flex

2. flex-direction — направление оси

3. flex-wrap — перенос строк

4. flex-flow — краткая запись

5. justify-content — выравнивание по основной оси

6. align-items — выравнивание по поперечной оси

7. align-content — выравнивание нескольких строк

Свойства элементов (children)

1. order — порядок элементов

2. flex-grow — растяжение

3. flex-shrink — сжатие

4. flex-basis — базовый размер

flex — краткая запись

Практические примеры

Пример 1: Центрирование по центру (горизонтально и вертикально)

Пример 2: Навигация с логотипом слева, меню справа

Пример 3: Карточки в сетке

Пример 4: Фиксированная ширина + растягиваемый блок

Flexbox vs CSS Grid

Советы и лайфхаки

1. Установите min-width: 0 для flex-элементов

2. Избегайте width: 100% внутри flex

3. Проверяйте в разных браузерах

1. `display: flex`

2. `flex-direction` — направление оси

3. `flex-wrap` — перенос строк

4. `flex-flow` — краткая запись

5. `justify-content` — выравнивание по основной оси

6. `align-items` — выравнивание по поперечной оси

7. `align-content` — выравнивание нескольких строк

1. `order` — порядок элементов

2. `flex-grow` — растяжение

3. `flex-shrink` — сжатие

4. `flex-basis` — базовый размер

`flex` — краткая запись

1. Установите `min-width: 0` для flex-элементов

2. Избегайте `width: 100%` внутри flex