Введение

Flexbox

Flexbox — это способ раскладки элементов в строку или столбец с гибким управлением выравниванием, порядком и распределением пространства. Один родительский контейнер и дочерние элементы — и вы получаете навбары, карточки в ряд и центрирование очень просто.

Flex появился не так давно и сильно упростил жизнь верстальщикам. Самые простые кейсы — замена вёрстки на таблицах (<table>) и лёгкая раскладка карточек товаров в ряд.

В этом занятии: flex container, главная и поперечная оси, justify-content и align-items, свойства flex-grow, flex-shrink, flex-basis, типовые паттерны (центрирование, навбар) и практика — навбар, карточки в ряд, адаптивное выравнивание.

Flex container

Что такое flex-контейнер

Чтобы включить Flexbox, у родительского элемента задают display: flex (или display: inline-flex). Этот элемент становится flex-контейнером, а его прямые потомки — flex-элементами.

Сразу после этого дочерние блоки выстраиваются в одну линию по умолчанию (в ряд), и можно управлять их выравниванием и распределением места свойствами контейнера и самих элементов.

Оси

Главная и поперечная оси

В Flexbox есть две оси: main axis (главная) и cross axis (поперечная). По умолчанию главная ось — горизонтальная (слева направо), поперечная — вертикальная.

flex-direction меняет направление главной оси: row (по умолчанию), row-reverse, column, column-reverse. От этого зависят «начало» и «конец» контейнера и то, как работают выравнивание и порядок.

Схема: главная и поперечная оси Flexbox
Схема: главная ось (стрелка) и поперечная ось
Выравнивание

justify-content

justify-content выравнивает элементы вдоль главной оси. Значения для justify-content такие: flex-start, flex-end, center, space-between, space-around, space-evenly.

flex-start — к началу оси, flex-end — к концу, center — по центру. space-between — первый у начала, последний у конца, остальное пространство между ними поровну; space-around и space-evenly распределяют промежутки по-разному.

Демонстрация значений justify-content
Так работает justify-content: от flex-start до space-evenly элементы по-разному распределяются вдоль главной оси.
Выравнивание

align-items

align-items выравнивает элементы вдоль поперечной оси. Частые значения: flex-start, flex-end, center, stretch (по умолчанию — растянуть по высоте контейнера), baseline.

Для центрирования блока по вертикали и горизонтали в контейнере часто используют связку: display: flex; justify-content: center; align-items: center;.

Демонстрация значений align-items
Так работает align-items: выравнивание элементов разной высоты вдоль поперечной оси (flex-start, flex-end, center, stretch и др.).
Александр
Центрирование одним контейнером — это уже полдела для лендингов.
Демо

Центрирование по кнопке

Ниже — flex-контейнер с одним блоком внутри. Нажмите кнопку — увидите, как меняется выравнивание (justify-content и align-items).

Блок по центру
Размеры элементов

flex-grow

flex-grow задаётся у flex-элемента. Значение — число (по умолчанию 0). Оно определяет, какую долю свободного места элемент займёт относительно других. Например, у двух элементов flex-grow: 1 и flex-grow: 2 второй займёт в два раза больше лишнего пространства.

Если у всех по 1 — свободное место распределится поровну.

Попробуйте:

1
2
3
Размеры элементов

flex-shrink и flex-basis

flex из трёх значений: flex-grow (рост), flex-shrink (сжатие), flex-basis (базовый размер). Например flex: 1 1 auto — grow 1, shrink 1, basis auto (делить место поровну, сжиматься при нехватке). flex: 1 0 80px — базис 80px, расти можно, сжиматься нельзя.

Узкий контейнер (320px) — переключайте и смотрите, как ведут себя три значения:

A
B
C

grow 1, shrink 1, basis auto — делят место и сжимаются в узком контейнере.

Сокращение

Свойство flex (shorthand)

Свойство flex объединяет flex-grow, flex-shrink и flex-basis. Частые записи: flex: 1 (эквивалент 1 1 0% — расти и сжиматься поровну), flex: 0 0 auto (размер по содержимому, не расти и не сжиматься), flex: 1 1 200px (базис 200px — «стартовый» размер до распределения места; у трёх элементов можно задать разный basis, например 200px, 120px, 80px), flex: 2 1 1 (пропорции 2:1:1 — первый займёт в два раза больше свободного места).

Попробуйте:

1
2
3
Паттерны

Типовой паттерн: центрирование

Чтобы отцентрировать содержимое по вертикали и горизонтали: контейнеру задайте display: flex; justify-content: center; align-items: center;. Если контейнер должен занимать весь экран по высоте — добавьте min-height: 100vh.

Это один из самых частых приёмов для Hero-блоков и модальных окон.

Паттерны

Типовой паттерн: навбар

Навбар — строка с логотипом слева и ссылками справа. Контейнер: display: flex; align-items: center; justify-content: space-between;. Логотип и группа ссылок — два flex-элемента; группа ссылок может быть вложенным flex с gap между пунктами.

При необходимости на мобильных меняют flex-direction на column или скрывают меню за кнопкой.

Пример навбара на flex:

Перенос и отступы

flex-wrap и gap

По умолчанию элементы не переносятся (flex-wrap: nowrap). Чтобы при нехватке места строка переносилась, задайте flex-wrap: wrap (или wrap-reverse).

Попробуйте flex-wrap (контейнер узкий — 320px):

1
2
3
4
5

gap задаёт расстояние между элементами по обеим осям (например gap: 16px). Удобно вместо margin между карточками — не нужно обнулять крайние отступы.

1) Меняйте gap:

A
B
C

2) Сравните: gap vs margin — у margin крайние элементы прилипают к краям контейнера, gap даёт равные отступы между всеми.

1
2
3
Мария
gap реально упрощает сетки из карточек.
Демо

justify-content на практике

Переключайте кнопки — у контейнера ниже меняется только justify-content. Элементы выстраиваются по-разному.

1
2
3
Резюме

Кратко о Flexbox

Flex-контейнер: display: flex. Оси: главная (main) и поперечная (cross). justify-content — вдоль главной, align-items — вдоль поперечной. У элементов: flex-grow, flex-shrink, flex-basis или shorthand flex. Типовые паттерны: центрирование (center + center), навбар (space-between), карточки в ряд с gap и при необходимости flex-wrap для адаптива.

Дмитрий
Готов к заданиям.
Задание 1

Сопоставьте свойство и описание

Выберите для каждого свойства подходящее описание (ответы перепутаны).

align-items
flex-grow
justify-content
Задание 2

Что использовать для навбара?

Какая связка свойств типична для навбара (логотип слева, ссылки справа)?

Задание 3

Расставьте по порядку (центрирование)

Перетащите шаги так, чтобы получился правильный порядок для центрирования содержимого во flex-контейнере.

Финальный допуск

Краткий тест (8 вопросов)

Для доступа к практике нужно набрать не менее 80% (минимум 7 из 8 правильных ответов).

1. Чтобы сделать элемент flex-контейнером, задают…

2. justify-content выравнивает элементы вдоль…

3. align-items выравнивает элементы вдоль…

4. flex-grow: 1 у всех элементов означает…

5. Для центрирования по вертикали и горизонтали в контейнере используют…

6. flex-wrap: wrap нужен чтобы…

7. Свойство gap задаёт…

8. Для навбара с логотипом слева и ссылками справа типично…

Практика

Итоговое задание: Flexbox

Сделайте одну HTML-страницу со стилями в <style> (или подключите .css и для проверки скопируйте стили в <style> в тот же файл). Выполните:

  • Navbar — шапка-навбар с flex: логотип/название слева, несколько ссылок справа (используйте display: flex у контейнера навбара и выравнивание, например justify-content: space-between, align-items: center).
  • Карточки в ряд — блок с минимум тремя карточками в одну строку на flex (контейнер с display: flex, у карточек можно задать flex: 1 или фиксированную ширину, при желании gap).
  • Адаптивное выравнивание — при ширине экрана меньше 600px карточки должны переноситься или менять выравнивание (используйте flex-wrap: wrap и/или медиа-запрос @media (max-width: 600px) с изменением flex или выравнивания).

Порог зачёта: 70 баллов из 100. Загрузите index.html и нажмите «Проверить».