Модуль 12

Flexbox: основи layout-логіки

Ось готовий урок, створений за твоїм майстер-промптом.

🎓 Урок CS50: Flexbox — Магія гнучких коробок

Привіт, світе! Радий бачити вас усіх.

Сьогодні ми поговоримо про те, що роками було справжнім нічним жахіттям для веб-розробників. Я серйозно. Уявіть, що ви хочете просто поставити три картинки в ряд. Або, що ще страшніше, — вирівняти кнопку точно по центру екрана.

Здавалося б, проста задача, так? Як повісити картину на стіну. Але в CSS до появи Flexbox це було схоже на спробу повісити картину, використовуючи лише скотч і молитви. Ми використовували милиці, float, таблиці... Це був хаос.

Сьогодні ми розберемо Flexbox. Це інструмент, який нарешті дозволяє нам сказати браузеру: "Гей, візьми ці елементи і розташуй їх нормально. Будь ласка".

Чи готові ви отримати суперсилу керування простором? Тоді погнали! 🚀

1. 🔥 Вступ: Проблема «Пакування валізи»

Давайте уявимо ситуацію. Ви збираєтесь у відпустку. У вас є валіза (це наш контейнер) і у вас є купа речей: футболки, шкарпетки, камера (це наші елементи).

Як ви їх складаєте? 1. Ви можете кинути їх як попало (стандартна поведінка браузера — елементи падають зверху вниз). 2. Ви хочете скласти їх акуратно в ряд. 3. А якщо валіза ширша, ніж речі? Ви хочете, щоб вони розтягнулися і зайняли все місце? Чи щоб вони збилися в купу по центру? Або щоб між ними була рівна відстань?

Риторичне питання: Чому комп'ютер сам не може здогадатися, що я хочу кнопку по центру, а не десь у лівому верхньому кутку?

Відповідь: Тому що комп'ютер — це не дизайнер. Він виконує інструкції. Без Flexbox наші інструкції були дуже незграбними. Flexbox (Flexible Box Layout) — це набір правил, який дає нам повний контроль над тим, як "речі" поводяться всередині "валізи", навіть якщо розмір валізи змінюється (наприклад, ви розтягуєте вікно браузера).

Без цього ви не зможете створити жоден сучасний сайт: ні Instagram, ні YouTube, ні Google. Все це — Flexbox.

2. 🧠 Теоретична база: Осі та Контейнери

Давайте заглянемо під капот. Тут немає магії, тут є чиста логіка.

Щоб Flexbox запрацював, нам потрібно зрозуміти лише дві сутності:

  1. Flex-Container (Батько): Це коробка, на яку ми вішаємо "магію".
  2. Flex-Items (Діти): Це елементи всередині коробки, які починають слухатися магії.

❗️ Що треба запам'ятати залізобетоно: Вся магія пишеться для БАТЬКА (Container), а рухаються ДІТИ (Items). Це найчастіша помилка. Ви не кажете дитині "стань у центр", ви кажете кімнаті "вирівняй дітей по центру".

Головна концепція: Дві Осі

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

Ми керуємо елементами вздовж цих двох осей за допомогою двох командирів:

  1. justify-content — керує розташуванням на Головній осі (вздовж мотузки: зсунути вліво, вправо, розкидати).
  2. align-items — керує розташуванням на Поперечній осі (впоперек: притиснути до стелі, до підлоги, або по центру висоти).

3. 🧪 Приклади: Від хаосу до порядку

Давайте подивимось на це в дії.

Приклад 1: "Магічний клік"

Уявіть, що у нас є три div (квадрати) всередині контейнера section.

HTML:

<section class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</section>

Без CSS вони стоять один під одним (блокові елементи). А тепер увага. Що станеться, якщо ми додамо лише одну стрічку коду батькові?

CSS:

.container {
  display: flex; /* Тільки це! */
}

Результат: Вони миттєво стають в один ряд! 🪄 Чому? Тому що display: flex за замовчуванням створює головну вісь зліва направо і каже дітям: "Шикуйсь у ряд!".

Приклад 2: Типове меню сайту (Навігація)

Ви всі бачили сайти: Логотип зліва, а посилання (Вхід, Про нас) — справа. Як це зробити? Відступи в пікселях? Ні в якому разі!

Використовуємо justify-content (вирівнювання вздовж головної осі).

CSS:

.navbar {
  display: flex;
  justify-content: space-between; /* Ключовий момент */
  align-items: center; /* Щоб все було рівно по вертикалі */
}

Що відбувається? space-between бере все вільне місце і запихає його між елементами. Перший елемент прилипає до лівого краю, останній — до правого. Ідеально.

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

Ви хочете текст ідеально по центру екрана. І по вертикалі, і по горизонталі.

CSS:

.hero-section {
  display: flex;
  height: 100vh; /* На всю висоту екрана */

  justify-content: center; /* Центр по горизонталі (Головна вісь) */
  align-items: center;     /* Центр по вертикалі (Поперечна вісь) */
}

Питання до вас: Якби я змінив flex-direction на column (зробив головну вісь вертикальною), що б зробили justify-content та align-items? (Пауза для роздумів) Відповідь: Вони б помінялися ролями! justify завжди працює вздовж Головної осі, куди б вона не дивилась.

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

Час бруднити руки кодом! Відкрийте редактор (або Codepen).

Завдання 1: Світлофор Створіть контейнер і три кружечки (червоний, жовтий, зелений). * Зробіть так, щоб вони стояли горизонтально по центру екрана. * Зробіть так, щоб між ними було трохи простору (gap: 20px).

Завдання 2: Мобільна версія У CSS є властивість flex-direction: column. * Візьміть свій світлофор. * Змініть код так, щоб кружечки стали вертикально, як у справжнього світлофора.

Завдання 3: Картка товару Створіть картку товару: картинка, заголовок, ціна і кнопка "Купити". * Використовуйте display: flex і flex-direction: column для самої картки. * Але! Ціну і кнопку "Купити" поставте в один ряд внизу картки (вам знадобиться ще один флекс-контейнер всередині картки для цих двох елементів).

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

Питання "А що, якщо...": А що, якщо я задам justify-content: center і justify-content: space-between одночасно? (Спробуйте. Браузер виконає тільки останнє правило в CSS, бо воно перекриває попереднє).

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

Як думає Senior-розробник, коли бачить макет сайту?

  1. "Бачу коробки в коробках". Він не бачить "картинку і текст". Він бачить: "Ага, це великий Флекс-контейнер (рядок), всередині нього зліва блок, справа блок. У правому блоці — ще один Флекс (стовпчик)".
  2. "Спочатку структура, потім краса". Спочатку ми розкидаємо елементи по місцях за допомогою Flexbox, і тільки потім додаємо кольори, тіні та шрифти.
  3. Дебаг. Якщо щось стоїть криво, досвідчений розробник одразу додає тимчасові рамки: border: 1px solid red; для контейнера і border: 1px solid blue; для елементів. Так ви одразу бачите, де закінчується "валіза" і чому "шкарпетки" не влазять.

Типова помилка новачка: Писати justify-content для дитини. Пам'ятайте: Ви не кажете дивані "посунься", ви кажете кімнаті "розстав меблі". Властивості пишуться в батьківському селекторі!

6. 🧩 Підсумок

Отже, що ми сьогодні зробили?

  1. Ми викинули старі методи верстки на смітник історії.
  2. Ми навчилися керувати Головною віссю (justify-content) та Поперечною віссю (align-items).
  3. Ми зрозуміли, що Flexbox — це про відносини між Батьком (контейнером) і Дітьми (елементами).

Тепер ви можете створити навігацію, відцентрувати будь-що і побудувати сітку для фотогалереї.

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

На наступному уроці ми познайомимося зі старшим братом Флексбокса — CSS Grid. Це буде як перехід від шашок до 3D-шахів.

А поки що — практикуйтеся "пакувати валізи"! Побачимось! 👋

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