Cтворення горизонтального меню з застосуванням Flexbox

Будь яке меню на веб-сторінці створюється з застосуванням HTML-коду маркованого списку:

<ul class="menu">
  <li class="item"><a href="" class="link">Головна</a></li>
  <li class="item"><a href="" class="link">Блог</a></li>
  <li class="item"><a href="" class="link">Підкасти</a></li>
  <li class="item"><a href="" class="link">Контакти</a></li>
</ul>

Для створення горизонтального меню, потрібно перетворити ul.menu у flex-контейнер. Тоді його діти, елементи li.item, розташуються вздовж головної осі, яка за замовчуванням йде зліва направо.

.menu {

  display: flex;
}

Флекс-контейнер ul.menu жодним чином не впливає на a.link всередині елементів списку, тому що вони його нащадки, а не діти. Флекс-елементами стають саме діти, у нашому випадку - елементи li.item.

Властивість flex-direction

Властивість flex-direction встановлює напрямок головної осі, визначаючи напрямок елементів в контейнері.

За замовчуванням для flex-direction встановлено значення row, тому елементи верхнього меню починають вибудовуватися зліва направо.

Для нижнього меню задано значення row-reverse, головна вісь розвернулася на 180 градусів та елементи вибудовуються справа наліво.

Властивість justify-content

Значення, що найчастіше використовуються, у тому числі значення за замовчуванням, наведені в прикладі. Вони включають зміщення контенту вправо (flex-end), центрування (center) і рівномірний розподіл простору між елементами (space-between).

Властивість align-items

Управляє розташуванням елементів вздовж поперечної осі. Це аналог justify-content для головної осі.

Найчастіше застосування - це вертикальне центрування елементів в рядку, особливо, якщо елементи різної висоти. Додамо до нашої розмітки шапку з логотипом і вкладемо меню в шапку таким чином, щоб логотип і меню були сусідами.

<header class="page-header">
  <a href="" class="logo">Логотип</a>

  <ul class="menu">
    <li class="item"><a href="" class="link">Головна</a></li>
    <li class="item"><a href="" class="link">Блог</a></li>
    <li class="item"><a href="" class="link">Підкасти</a></li>
    <li class="item"><a href="" class="link">Контакти</a></li>
  </ul>
</header>

Вкладений flex-контейнер

Будь-якому нащадкові, що знаходиться під дією властивості flex батьківського елемента, можна також задати властивість flex. Цей прийом можна застосовувати для розміщення складних конструкцій, на зразок логотипу та навігаційного меню.

Завдання 1

Створити горизонтальне меню згідно зразка з застосуванням Flexbox

Вихідний код завдання:

Завдання 2

Створити горизонтальне меню за зразком

Завдання 3