Урок 3: Flexbox — Зроби Свій Сайт Стильним, Як Недільний Пікнік!

Lesson3

Урок 3: Flexbox — Зроби Свій Сайт Стильним, Як Недільний Пікнік!

Огляд

Привіт знову, чарівнику коду! 🎩 Якщо твоя веб-сторінка виглядає, як ярмарок на свято Івана Купала — кожен елемент кидається куди хоче, — час внести порядок. А який найкращий спосіб зробити це? Правильно, використовуємо Flexbox!

Flexbox — це як головний організатор на пікніку: кожен елемент має своє місце, знає, як поводитися, і ніхто не лізе на чужу ковдру (ну, майже). Після цього уроку ти зможеш упорядкувати свої елементи так, щоб вони виглядали стильно, як стіл із найкращими стравами на весіллі. Приготуй чашку чаю з варенням, і поїхали наводити порядок!

Крок 1: Налаштування та Запуск із Caddy (Влаштовуємо Пікнік!)

Перш ніж запросити всіх гостей (елементи) на пікнік, давай запустимо наш проект за допомогою Caddy. Відкрий термінал і перейдіть до папки проекту:

cd ~/Documents/my-css-project

Тепер запустимо Caddy:

caddy file-server --listen :8080

Твоя сторінка тепер доступна за http://localhost:8080. Давай прикрасимо її!

Крок 2: Встановлюємо Flexbox — Головний Адміністратор Всієї Структури

Щоб використовувати Flexbox, потрібно просто додати display: flex; до контейнера. Уяви, що Flexbox — це ніби адміністратор пікніка, який змушує кожного сісти там, де треба.

HTML Налаштування:

Почнемо з того, що розкладемо нашу ковдру (HTML) і запросимо гостей (елементи):

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Пікнік</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="flex-container">
        <div class="box">Вареник 1</div>
        <div class="box">Вареник 2</div>
        <div class="box">Вареник 3</div>
        <div class="box">Вареник 4</div>
    </div>
</body>
</html>

Тепер пояснимо нашому адміністратору (Flexbox), як розмістити страви:

styles.css

body {
    font-family: Arial, sans-serif;
}

.flex-container {
    display: flex; /* Зустрічайте, пане Flexbox! */
    justify-content: space-around; /* Розставимо вареники рівномірно. */
    padding: 10px;
}

.box {
    padding: 20px;
    margin: 10px;
    background-color: lightcoral;
    color: white;
    font-weight: bold;
}

Збережи файл, онови http://localhost:8080, і дивись: твої вареники (div) рівненько стоять, готові до прийому гостей.

Крок 3: Розуміння Властивостей Flexbox — Як Садити Гостей на Пікнік

Flexbox пропонує багато властивостей, щоб допомогти тобі розташувати всіх так, щоб ніхто не скаржився. Ось основні:

  • justify-content: Вирішує, як вирівняти елементи горизонтально. Це як обирати, чи розкидати вареники по всій ковдрі, чи зібрати їх у купку, щоб ніхто не загубився.

    • justify-content: flex-start; — Всі вареники скупчилися на одному кінці, як діти біля бабусі.
    • justify-content: flex-end; — Всі зібралися на іншому кінці, чекаючи черги на чай.
    • justify-content: center; — Всі посередині, як у затишній бесіді.
    • justify-content: space-between; — Вареники стоять рівномірно, як паркан навколо городу.
    • justify-content: space-around; — Вареники мають однаковий простір навколо, ніби всі зберігають соціальну дистанцію.

  • align-items: Вирівнює елементи вертикально. Змусимо вареники триматися рівно або розслабитися.

    • align-items: flex-start; — Всі вирівнюються вгору, як під час перших тостів.
    • align-items: center; — Вареники стоять рівно посередині, як дисципліновані школярі.
    • align-items: flex-end; — Вареники опускаються вниз, як гості, що переїли.

Крок 4: Створення Рядів і Стовпців — Танцюємо Гопака!

Ти також можеш змінювати напрямок макету Flexbox, використовуючи flex-direction. Ця властивість вирішує, чи твої гості сидять у рядах, чи збираються в стовпці:

.flex-container {
    display: flex;
    flex-direction: row; /* За замовчуванням — вареники сидять один біля одного. */
}

.flex-container.kolonna {
    flex-direction: column; /* Тепер вони стоять в колону, як на параді. */
}

Спробуй!

Зміни свій HTML, щоб побачити різницю:

<div class="flex-container kolonna">
    <div class="box">Вареник 1</div>
    <div class="box">Вареник 2</div>
    <div class="box">Вареник 3</div>
    <div class="box">Вареник 4</div>
</div>

Тепер вареники виставлені у вертикальну чергу, як страви на святковому столі.

Крок 5: Повний Набір — Організуємо Справжній Святковий Обід!

Давай зберемо все докупи в ідеальний макет Flexbox. Ось як має виглядати твій styles.css:

body {
    font-family: Arial, sans-serif;
}

.flex-container {
    display: flex;
    justify-content: center; /* В центрі, як гарний борщ на обідньому столі. */
    align-items: center; /* Всі рівно, як на святковій світлині. */
    flex-wrap: wrap; /* Обгортай елементи в рядки чи стовпці, як тільки потрібно. */
    gap: 15px; /* Залишмо трохи місця між стравами, щоб не пролити борщ. */
    border: 2px solid lightgrey;
    padding: 20px;
    background-color: #f9f9f9; /* Класичний фон, як бабусина скатертина. */
}

.box {
    padding: 20px;
    background-color: lightblue;
    color: darkblue;
    font-weight: bold;
    text-align: center;
}

Тепер кожен вареник на своєму місці, наче гості за столом.

Висновок

Вітаю, майстре стилю! Тепер твої елементи знають, як триматися рівно і чемно стояти в рядок. Flexbox — це як головний координатор, який стежить, щоб усі не лише виглядали гарно, а й стояли правильно.

У наступному уроці ми поговоримо про CSS Grid — справжнього архітектора макетів. Якщо