nmk

Лабораторне заняття №4 (2 години). Побудова складної навігації та карток товарів (Flexbox).

Мета

Опанувати технологію CSS Flexbox для створення одновимірних макетів. Навчитися вирівнювати елементи по горизонталі та вертикалі, створити “шапку” сайту (Header) з навігацією та сітку карток товарів для інтернет-магазину.

План

1. Створення Flex-контейнерів для глобальних блоків.
2. Стилізація Header: логотип зліва, меню по центру, кошик справа (justify-content).
3. Вирівнювання елементів по вертикалі (align-items).
4. Стилізація секції з картками товарів: перенесення рядків (flex-wrap).
5. Внутрішня структура картки товару (flex-direction: column).

Хід роботи

Увага: Продовжуємо роботу над інтернет-магазином “TechShop”.

Порада: Якщо у вас ще немає репозиторію, створіть його за допомогою команди git init та додайте файл .gitignore з переліком папок та файлів, які не потрібно відстежувати (наприклад, node_modules, .env, dist, build). Ви також можете працювати над створенням власного сайту (наприклад, під час лабораторної роботи ми працювали над сайтом “My Portfolio”). Головна умова - виконання всіх пунктів плану.

1. Базова розмітка (HTML):
   • Переконайтеся, що у вашому <header> є 3 логічні блоки:
     • Логотип (напр. <div class="logo">TechShop</div>),
     • Навігація (<nav class="main-nav">...<ul><li><a href="#">...</nav>`),
     • Блок користувача (<div class="user-actions"><button class="btn">Кошик</button></div>).
   • Додайте клас .header до тегу <header>.

   Так робити не можна: Не намагайтеся вирівнювати ці 3 блоки всередині шапки за допомогою margin-left: 100px або float: left. Це “крихкий” спосіб, який зламається на першому ж іншому екрані.

2. Стилізація Header:
   • У style.css зробіть .header flex-контейнером:

     .header {
       display: flex;
       justify-content: space-between; /* Розставляє блоки по краях */
       align-items: center; /* Центрує лого та кнопки по вертикалі */
       padding: 1rem 5%;
       background-color: var(--bg-color);
       box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
     

   • Навігація: Для .main-nav ul задайте display: flex; gap: 2rem; list-style: none;.

   Порада: Використовуйте властивість gap замість margin для відступів між пунктами меню. gap не створює зайвих відступів по краях контейнера, що робить розрахунки чистішими.

3. Стилізація секції товарів (Каталог):
   • Створіть контейнер .products-grid для всіх карток.
   • Використайте flex-wrap: wrap;, щоб картки не стискалися в один тонкий рядок, а переходили на нові.

     .products-grid {
       display: flex;
       flex-wrap: wrap; 
       gap: 20px;
       justify-content: space-around; /* Рівномірний розподіл простору між картками */
     }
     

   Важливо: Без flex-wrap: wrap ваші картки будуть намагатися “втиснутися” в один рядок, навіть якщо їх там 50, що призведе до повного руйнування дизайну.

4. Верстка Картки Товару (.product-card):
   • Кожна картка повинна мати flex-direction: column. Це дозволяє керувати внутрішніми елементами (заголовок, ціна, кнопка) як стовпцем.

     .product-card {
       display: flex;
       flex-direction: column;
       width: calc(25% - 20px); /* Приблизно 4 картки в ряд з урахуванням gap */
       min-width: 250px; /* Захист від занадто вузьких карток */
       border: 1px solid #eee;
       padding: 15px;
     }
     .product-card button {
       margin-top: auto; /* МАГІЯ: штовхає кнопку в самий низ картки, незалежно від довжини тексту вище */
     }
     

   Так робити не можна: Не задавайте карткам фіксовану висоту (height: 500px). Якщо опис товару виявиться довшим, він просто вилізе за межі картки. Картка має сама розтягуватися під контент.

   Порада: Використання margin-top: auto всередині flex-стовпця — це найкращий спосіб вирівняти кнопки до одного рівня в усіх картках ряду, навіть якщо назви товарів мають різну кількість рядків.

5. Збереження (Commit & Push):
   • Перевірте статус: git status.
   • Додайте зміни: git add ..
   • Зафіксуйте: git commit -m "Lab 4: Accomplish header and grid layout using Flexbox".
   • Відправте: git push origin main.

Результат

Головна сторінка сайту має повноцінну “шапку” (де елементи рознесені по краях), а під нею знаходиться сітка однакових карток товарів, які автоматично переносяться на новий рядок при зменшенні вікна.

Контрольні питання

1. В чому різниця між головною віссю (Main Axis) та поперечною віссю (Cross Axis) у Flexbox?
2. Яка властивість вказує Flexbox-контейнеру розсунути свої елементи максимально далеко один від одного?
3. Що робить властивість align-items: center? Як вона б спрацювала без вказання height або padding у контейнера?
4. Для чого ми застосовуємо flex-direction: column до картки товару, якщо і без неї блокові елементи (div, h3, p) стають стовпцем? (Підказка: дивіться на позиціювання кнопки внизу картки).
5. Назвіть 3 способи створити відступи між елементами всередині flex-контейнера. Який спосіб є найсучаснішим?