Урок 23. Задания: Главная и поперечная оси

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

⚡ Кратко

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

Задания

Заготовка для всех заданий — контейнер с тремя цветными блоками:

<!-- lesson-23/index.html -->
<div class="bar">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
  1. Главная ось. Сделайте .bar flex-контейнером в режиме row и прижмите блоки к правому краю. Ожидаемый результат: три блока в строке, у правой границы.
  2. Распределение. Раздайте равные промежутки между блоками, без отступов по краям. Подсказка: одно значение justify-content.
  3. Поперечная ось. Задайте контейнеру высоту 120px и поставьте блоки по центру по вертикали (но не по горизонтали).
  4. Центр по обеим осям. Поставьте один блок строго в центр контейнера высотой 120px.
  5. Смена осей. Переключите контейнер в column. Объясните словами: какое свойство теперь двигает блоки по горизонтали, а какое — по вертикали?
  6. Перенос. Добавьте 6 блоков и узкую ширину контейнера. Сравните flex-wrap: nowrap и wrap.
  7. DevTools. Откройте Flexbox overlay и определите на странице, где главная, а где поперечная ось.
Самопроверка: все свойства этого урока (flex-direction, justify-content, align-items, flex-wrap) пишутся на контейнере, а не на элементах. Решения — на странице «✅ Решения».

Навигация