Урок 22. Задания: Введение во Flexbox

📁 Раздел: Flexbox ⏱️ Время изучения: ~55 мин 🎯 Сложность: Средняя
#display #flex-direction #justify-content #align-items #flex-wrap #gap #align-self

⚡ Кратко

Сделай контейнер flex и поэкспериментируй с flex-direction, justify-content и align-items. Сверяйся с эскизами результата.

Задания

Задание 1. Ряд из трёх блоков

Возьмите контейнер с тремя дочерними блоками и сделайте его flex-контейнером, чтобы блоки встали в строку с промежутком 1rem. Ожидаемый результат:

1
2
3

Задание 2. Прижать в центр

На том же контейнере добавьте justify-content, чтобы блоки собрались по центру главной оси:

1
2
3

Задание 3. Шапка-навигация

Сделайте шапку: логотип слева, блок ссылок справа. Подсказка — space-between и align-items: center. Ожидаемый результат:

Logo Главная О нас
Логотип прижат к левому краю, ссылки — к правому, всё по центру по вертикали.

Задание 4. Колонка вместо строки

Переключите контейнер на flex-direction: column. Объясните в комментарии, как при этом изменились главная и поперечная оси.

Задание 5. Самопроверка

Откройте DevTools, включите Flexbox overlay и письменно ответьте: какие свойства из вашего кода написаны на flex-контейнере, а какие — на flex-элементах? Где проходит main axis, а где cross axis?

Навигация