Модуль 13

Flexbox: вирівнювання та адаптивність

Ось урок, створений спеціально для тебе у стилі David Malan. Вмикай уяву, ми починаємо!

🎓 Урок: Flexbox — Магія гнучких макетів

(або як нарешті центрувати div і не збожеволіти)

1. 🔥 Вступ: проблема та мотивація

Уявіть, що ви переїжджаєте у нову квартиру. У вас є набір коробок, які треба розставити вздовж стіни. Але є нюанс: стіна гумова. Вона то розтягується, то стискається.

Як зробити так, щоб коробки завжди стояли гарно? Щоб вони не наїжджали одна на одну, коли стіна стискається? Або щоб рівномірно розподілялися, коли стіна розтягується?

Раніше (у "темні часи" вебу) розробники використовували таблиці (<table>) або "плаваючі" блоки (float). Це було схоже на спробу побудувати хмарочос із желе — усе постійно ламалося, з’їжджало вниз, а відцентрувати елемент по вертикалі було складніше, ніж довести теорему Ферма.

Питання до вас: Ви коли-небудь пробували вручну вираховувати пікселі, щоб кнопка була рівно посередині екрану, а на телефоні вона все одно "тікала"?

Саме тому з’явився Flexbox (Flexible Box Layout). Це інструмент, який каже браузеру: "Гей, я не знаю, якої ширини буде екран користувача, але я хочу, щоб ці елементи поводилися розумно".

Без Flexbox (і його брата Grid) сучасний адаптивний веб просто неможливий.

2. 🧠 Теоретична база (без нудьги)

Flexbox — це одновимірна система. Уявіть собі нитку, на яку ви нанизуєте намистини. Нитка може йти зліва направо (рядок) або зверху вниз (стовпчик). Але це завжди одна лінія.

Два головних герої:

  1. Flex-контейнер (Батько) — елемент, який керує всіма всередині.
  2. Flex-елементи (Діти) — блоки всередині, які слухаються батька.

⚙️ Що відбувається "під капотом"?

Коли ви пишете display: flex для батьківського елемента, ви активуєте дві невидимі осі: * Головна вісь (Main Axis): За замовчуванням йде зліва направо (як текст у книзі). * Поперечна вісь (Cross Axis): Перпендикулярна до головної (зверху вниз).

🔑 Ключові заклинання (запам'ятати обов'язково):

  1. display: flex; — Вмикає магію. Без цього нічого не працює.
  2. flex-direction — Куди йде наша "нитка"?
    • row (стандарт) — в рядок ➡️
    • column — в стовпчик ⬇️
  3. justify-content — Як розподілити простір уздовж Головної осі (по горизонталі, якщо це рядок).
    • Аналогія: Як розсадити гостей на довгому дивані? (Всіх ліворуч? Всіх по центру? Чи розкинути по краях?)
  4. align-items — Як вирівняти елементи вздовж Поперечної осі (по вертикалі, якщо це рядок).
    • Аналогія: На якій висоті вішати картини? (Під стелею? По центру стіни? Чи розтягнути на всю стіну?)

3. 🧪 Приклади (від простого до реального)

Давайте подивимось на код.

Приклад 1: Класичне меню навігації

У нас є список посилань. Ми хочемо, щоб вони стояли в ряд, а між ними було порожнє місце.

<nav class="menu">
  <div>Головна</div>
  <div>Про нас</div>
  <div>Контакти</div>
</nav>

.menu {
  display: flex;             /* 1. Робимо контейнер гнучким */
  justify-content: space-between; /* 2. Розкидаємо елементи по краях */
  align-items: center;       /* 3. Центруємо по вертикалі */
  height: 60px;
  background: #f0f0f0;
}

Що тут відбулося? justify-content: space-between штовхнув "Головну" ліворуч, "Контакти" праворуч, а "Про нас" лишив рівно посередині. Ніяких відступів у пікселях!

Приклад 2: "Святий Грааль" (Центрування всього)

Питання: Як поставити текст ідеально по центру екрану?

.hero-section {
  display: flex;
  justify-content: center; /* Центр по горизонталі */
  align-items: center;     /* Центр по вертикалі */
  height: 100vh;           /* На всю висоту екрану */
}

Це все. Три рядки коду. Раніше на це витрачали години і купу нервів.

Приклад 3: Адаптивна картка (коли місця мало)

Що, якщо елементів багато, і вони не влазять в один рядок? Наприклад, товари в магазині. Тут вмикається властивість flex-wrap (перенесення).

.products {
  display: flex;
  flex-wrap: wrap; /* Дозволяє елементам падати на наступний рядок */
  gap: 20px;       /* Відступи між елементами (сучасний спосіб) */
}

Якщо екран широкий — всі товари в один ряд. Якщо екран смартфона — вони автоматично шикуються в кілька рядів.

4. 🛠 Практична частина

Час "забруднити руки" кодом. Відкрийте редактор (CodePen, VS Code) і спробуйте:

Завдання 1: Світлофор 🚦 Створіть контейнер і три div-кола (червоний, жовтий, зелений). * Зробіть так, щоб вони стояли вертикально (flex-direction: column). * Вирівняйте їх по центру сторінки.

Завдання 2: Хедер сайту Створіть контейнер, у якому є Логотип (зліва) і Кнопка "Увійти" (справа). * Яку властивість justify-content треба використати, щоб розкидати їх максимально далеко один від одного?

Завдання 3: Галерея Створіть 6 квадратів різного кольору. * Зробіть так, щоб вони йшли в ряд. * Зменшуйте вікно браузера. Вони стискаються? * Додайте flex-wrap: wrap. Що змінилося?

Завдання 4: Міні-кейс "Чат" У вас є повідомлення. * Зробіть так, щоб аватарка була зліва, а текст повідомлення справа від неї. * Важливо: текст має бути відцентрований по вертикалі відносно аватарки (щоб не "висів" зверху).

Завдання 5: А що, якщо... Змініть у першому завданні (Світлофор) напрямок на row-reverse. Що сталося з порядком кольорів?

5. 💡 Мислення як у розробника

Ось де новачки найчастіше спотикаються, а профі — ні.

  1. Помилка: Застосовувати justify-content до дочірнього елемента.

    • Як думає профі: Flexbox — це про стосунки. Властивості вирівнювання ми пишемо Батькові (контейнеру), а не дітям. Батько вирішує, де сидять діти.

  2. Помилка: Плутанина осей.

    • Як думає профі: Якщо я написав flex-direction: column, моя головна вісь тепер вертикальна! Отже, justify-content тепер вирівнює вертикально, а align-items — горизонтально. Я завжди подумки повертаю систему координат.

  3. Порада: Використовуйте бордери.

    • Якщо щось не стає на місце, додайте border: 1px solid red контейнеру і blue елементам. Ви одразу побачите, де закінчується контейнер і чому центрування не працює (спойлер: часто контейнер просто не має висоти!).

6. 🧩 Підсумок

Отже, що ми маємо? Flexbox — це не просто набір команд. Це спосіб мислення блоками, які реагують на простір навколо них.

Тепер ви вмієте: * ✅ Ставити елементи в рядок або стовпчик однією командою. * ✅ Ідеально центрувати будь-що (Святий Грааль!). * ✅ Робити так, щоб інтерфейс не ламався на мобільних, а гарно перебудовувався.

Але зачекайте... Ми говорили про одновимірні макети (рядок АБО стовпчик). А що робити, якщо нам потрібна складна сітка, як у газеті, де є і рядки, і стовпці одночасно, і елементи перекривають один одного?

Для цього у нас є "важка артилерія" — CSS Grid. І про це ми поговоримо на наступному уроці.

А поки — практикуйтеся з flex! Це база, на якій тримається інтернет.

← До списку уроків Наступний урок →