Урок 13.

Практична робота 5. Використання модуля CSS Flexbox

Увага! Під час роботи з комп'ютером дотримуйтеся правил безпеки та
санітарно-гігієнічних норм.

Завдання. Створити адаптивну навігаційну панель

засобами модуля CSS Flexbox

Хід виконання
І. За основу візьмемо навігаційну панель, розроблену на практичній роботі 2
(урок 7).
1. Відкриємо у редакторі коду HTML-файл “index.html”. Елементу “ul”
призначимо клас “контейнер”.

2. Відкриємо у редакторі коду СSS-файл “style.css”. Оголосимо створений

нами клас з наступними атрибутами (2).
3. Елементам списку призначимо наступні атрибути (3) Замість
запропонованих кольорів оберіть на свій розсуд колір тла та колір межі.

2 3
4. Перегляньте браузером отриманий результат. Зробіть скріншот та
розмістіть його на слайді презентації з відповідним записом значення модуля
Flexbox.
5. Замініть значення атрибуту “flex-direction” на “column-reverse”.
Збережіть та оновіть сайт у браузері. Зробіть скріншот та розмістіть його на
наступному слайді презентації
6.Перегляньте сайт при зміні значень атрибуту “flex-direction” на “row-
reverse” та “row” відповідно. Зробіть скріншоти з подальшим збереженням у
презентації.
7. Додайте атрибут “justify-content». Надайте значення “center”, “flex-start”,
“flex-end”, “space-around”. Зробіть скріншоти при кожному значенні атрибуту
8. Збільшіть висоту контейнера (height: 200px; або 300px). Додайте атрибут
«align-items». Перегляньте та зробіть скріншоти при значеннях: “center”, “flex-
start”, “flex-end”, “stretch”. Зробіть висновок про природу значення “stretch”
атрибута «align-items» та “space-around” атрибута “justify-content».

ІІ. Для перевірки скористаємось можливостями браузера Google Chrome

Ctrl+Shift+I або права кнопка миші – і у контексному меню обираємо команду
«Перевірити». Відкривається панель інспектора коду, обираємо у рядку меню
команду «Панель перемикачів девайсів» (Toggle device toolbar) натиснувши на
неї ми можемо обирати емуляцію девайсу (див рис.1)Якщо девайсу, який нас
цікавить немає в списку, ми можемо, натиснувши команду Edit, пошукати у
додатковому меню (в)

Рис. 1. Панель інспектора коду браузера Google Chrome: а – «Панель

перемикачів девайсів»; б – вибір розміру екрану; в – додаткове меню.