Flexbox контейнер, оси, выравнивание и типовые задачи

1.

CSS · ВЁРСТКА
Flexbox
Контейнер, оси и выравнивание —
и три типовые задачи: меню, карточки, подвал
Әділхан Д.С.

2.

План урока
ЧАСТЬ 1 · ОСНОВЫ
ЧАСТЬ 2 · ПРАКТИКА
1. Зачем нужен Flexbox
1. Навигационное меню
2. Контейнер и элементы
2. Карточки одинаковой высоты
3. Главная и поперечная оси
3. Подвал, прижатый к низу
4. Выравнивание по осям
4. Самостоятельная работа
5. Перенос, gap и свойства элементов
Flexbox · 02

3.

ЗАЧЕМ НУЖЕН FLEXBOX
Flexbox выстраивает элементы вдоль одной
линии и сам делит между ними свободное
место
Раньше
Теперь
float, inline-block и таблицы — много хаков и
хаков и ручных расчётов
одна строка display: flex — и элементы встают меню, ряды карточек, формы, подвалы,
встают в ряд
центрирование
Flexbox · 03
Где применять

4.

Контейнер и элементы
display: flex задаётся родителю. Его прямые потомки
сразу становятся flex-элементами.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.container {
display: flex;
}
Flexbox · 04
flex-контейнер
1
2
3
↑ flex-элементы
Важно
Flexbox действует только на прямых потомков. Внуки контейнера
контейнера — обычные блоки, пока их родителю тоже не задать
display: flex.

5.

Две оси: главная и поперечная
Главная ось
1
2
3
Вдоль неё выстраиваются элементы. Направление
задаёт flex-direction, выравнивание — justify-content.
Поперечная ось
Перпендикулярна главной. Выравнивание по ней —
align-items.
cross
main axis →
Flexbox · 05
При flex-direction: column оси меняются местами.

6.

flex- d irectio n — куда идёт главная ось
row → (по умолчанию)
1
column ↓
2
3
row-reverse ←
3
column-reverse ↑
1
3
2
2
3
1
Flexbox · 06
2
1

7.

justify- co ntent — по главной оси
flex-start
1
2
3
center
1
2
3
flex-end
space-between
space-around
space-evenly
Flexbox · 07
1
1
2
1
2
3
3
2
1
2
3
3

8.

alig n- item s — по поперечной оси
stretch
1
flex-start
2
2
3
3
3
1
center
2
2
flex-end
3
3
3
1
2
2
3
3
3
1
align-self — то же самое, но для одного элемента: .item { align-self: flex-end; }
Flexbox · 08
2
2
3
3
3

9.

Перенос и отступы: flex- wrap и g ap
nowrap — по умолчанию, элементы сжимаются
1
2
3
4
5
6
7
8
wrap — не помещается? переносится
1
2
3
6
7
8
4
5
.container {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
gap вместо margin
gap задаёт промежутки только между элементами —
без лишних отступов по краям и без отрицательных
margin.
Flexbox · 09

10.

Свойства элементов: flex
Свойство
Что делает
flex- g ro w
какую долю свободного места забирает 0
элемент
flex- shrink
насколько сжимается, если места не
хватает
1
flex- basis
исходный размер до распределения
места
auto
сокращение: g ro w shrink basis
0 1 auto
flex
По умолчанию
flex: 1 · 1 · 1 — поровну
1
1
flex: 1 · 2 · 1 — центр вдвое шире
1
2
1
сайдбар + контент
200px
Flexbox · 10
1
flex: 1

11.

Шпаргалка
Свойство
Кому
Что задаёт
Частые значения
d isp lay
контейнеру
включает Flexb ox
flex, inline- flex
flex- d irectio n
контейнеру
направление главной оси
ro w, co lum n
justify- co ntent
контейнеру
выравнивание по главной оси
center, space- b etween
alig n- item s
контейнеру
выравнивание по поперечной оси
stretch, center, flex- start
flex- wrap
контейнеру
перенос на новую строку
no wrap , wrap
g ap
контейнеру
промежутки между элементами
16px, 24px 16px
flex
элементу
рост, сжатие, базовый размер
1, 0 0 200px
alig n- self
элементу
выравнивание одного элемента
center, flex- end
Flexbox · 11

12.

ЧАСТЬ 2
Типовые задачи
Меню · Карточки · Подвал

13.

Задача 1. Навигационное меню
LOGO
Главная
Курсы
О нас
Контакты
Войти
1. space-between разносит логотип, меню и кнопку по краям
.header {
display: flex;
justify-content: space-between;
align-items: center;
2. align-items: center ровняет их по вертикали, хотя высота у них
разная
3. .nav — второй, вложенный flex-контейнер: ссылки встают в ряд
с равным gap
}
.nav {
display: flex;
gap: 48px;
}
Flexbox · 13

14.

Задача 2. Карточки одинаковой высоты
Основы HTML
CSS Flexbox
Адаптивность
.cards {
Теги, структура
страницы, семантика.
Контейнер, оси,
выравнивание, перенос
и свойства элементов —
всё для раскладки
страницы.
Медиазапросы.
display: flex;
Подробнее
Подробнее
flex-wrap: wrap;
gap: 24px;
}
.card {
flex: 1 1 280px;
Подробнее
display: flex;
flex-direction: column;
Высота — сработал align-items: stretch у ряда.
}
Кнопка внизу — карточка сама flex-колонка, а margin-top: auto забирает всё
свободное место над кнопкой.
.card .btn {
margin-top: auto;
}
Flexbox · 14

15.

Задача 3. Подвал прижат к низу
header
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
main · flex: 1
flex: 1;
}
footer {
display: flex;
justify-content: space-between;
О нас
Контакты
© 2026
Контента мало, а подвал всё равно внизу экрана.
Flexbox · 15
}

16.

Самостоятельная работа
Сверстайте страницу «Курсы» — только на Flexbox:
01
02
03
Шапка
Каталог
Подвал
Логотип слева, меню и кнопка справа, всё
выровнено по центру по вертикали.
6 карточек курсов, по 3 в ряд; кнопки
«Подробнее» на одной линии.
Три колонки; прижат к низу экрана, даже
если карточек нет.
✓ Без float и position — только display: flex
✓ Отступы между элементами — через gap
Flexbox · 16
✓ Сузьте окно — карточки переносятся

17.

Проверь себя
01
02
Какое свойство задаёт направление главной оси?
Чем отличаются justify-content и align-items?
03
04
Как прижать кнопку карточки к её нижнему краю?
Почему подвал опускается вниз, если у main стоит
flex: 1?
Flexbox · 17