Домашнее задание

Задача: сверстайте горизонтальную шапку сайта (header): логотип слева, навигация справа, все элементы выровнены по центру по вертикали. Внизу — галерея карточек, которая переносится на новые ряды при сужении окна.

Ориентир — такой результат:

Logo

Меню

<!-- lesson-23/index.html -->
<header class="header">
  <div class="logo">Logo</div>
  <nav class="menu">Меню</nav>
</header>
<section class="gallery">
  <div class="card">1</div> ...
</section>

Разметка

Создайте <header> с логотипом и меню, и <section class="gallery"> с 5–6 карточками.

Шапка

Сделайте .header flex-контейнером: justify-content: space-between разведёт логотип и меню по краям, align-items: center выровняет их по вертикали.

Галерея

Сделайте .gallery flex-контейнером с flex-wrap: wrap, чтобы карточки переносились на новые ряды.

Проверка

Сужайте окно: шапка остаётся выровненной, карточки переносятся. Откройте Flexbox overlay в DevTools и найдите главную/поперечную оси.

📄 lesson-23/homework.css

.header {
  display: flex;
  justify-content: space-between; /* по краям главной оси */
  align-items: center;            /* по центру поперечной */
}

.gallery {
  display: flex;
  flex-wrap: wrap;                /* перенос карточек */
}

Подсказка: все четыре свойства этого ДЗ пишутся на контейнерах (.header, .gallery), а не на дочерних элементах.

Урок 23. Домашнее задание: Главная и поперечная оси

⚡ Кратко