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

Задача: соберите шапку сайта: логотип слева, блок навигации растягивается и забирает свободное место, кнопка «Войти» справа. Все расстояния задайте через gap, элементы выровняйте по центру по вертикали.

Ожидаемый результат

▦ MySite

📄 lesson-24/index.html

<header class="topbar">
  <strong class="logo">MySite</strong>
  <nav class="topbar__nav">
    <a href="#">Главная</a>
    <a href="#">О нас</a>
    <a href="#">Контакты</a>
  </nav>
  <button>Войти</button>
</header>

Подготовка окружения

Создайте папку проекта и два файла: index.html и styles.css. Откройте папку в VS Code (code .). Для предпросмотра удобно расширение Live Server (правый клик по index.html → «Open with Live Server»), но достаточно и просто открыть файл в браузере.

Разметка

Создайте <header> с логотипом, <nav> со ссылками и кнопкой. См. HTML выше.

Flex-контейнер

Сделайте шапку флекс-контейнером, выровняйте по центру вертикали и задайте промежутки через gap.

Растяжение навигации

Дайте блоку <nav> flex: 1, чтобы он занял всё свободное место между логотипом и кнопкой.

Проверка

Меняйте ширину окна и через DevTools (Flexbox overlay) убедитесь, что логотип и кнопка остаются по краям, а навигация тянется.

📄 lesson-24/styles.css

.topbar {
  display: flex;
  align-items: center;   /* по центру по вертикали (cross axis) */
  gap: 16px;             /* промежутки без margin-хаков */
  padding: 12px 16px;
}

.topbar__nav {
  flex: 1;               /* навигация забирает свободное место */
  display: flex;
  gap: 14px;
}

Связь с теорией: align-items и gap — раздел «Теория», приём flex: 1 разобран в «Примерах» (пример 5 и 6).

Урок 24. Домашнее задание: Выравнивание: justify-content, align-items, gap

⚡ Кратко