Layout з Flexbox

З поверненням.

У попередньому уроці ти вивчив box model.

Content.

Padding.

Border.

Margin.

Велика родина коробок.

Тепер ми навчимося красиво розставляти ці коробки на сторінці.

І тут входить Flexbox.

Flexbox — один із найкорисніших layout-інструментів у CSS.

Він допомагає вирівнювати елементи в rows або columns.

Він допомагає центрувати речі.

Він допомагає створювати navbar, cards, buttons, sections і layouts без повної втрати розуму.

Тільки часткової.

Бо це все ще CSS.

Що Ти Вивчиш

У цьому уроці ти дізнаєшся:

що таке Flexbox;
що таке flex container;
що таке flex items;
як використовувати display: flex;
як використовувати flex-direction;
як використовувати justify-content;
як використовувати align-items;
як використовувати gap;
як створювати прості layouts з cards;
як центрувати content за допомогою Flexbox.

Що Таке Flexbox?

Flexbox означає Flexible Box Layout.

Це CSS layout system, створена для організації елементів в одному напрямку.

Цей напрямок може бути:

row;
column.

Row іде зліва направо.

Column іде зверху вниз.

Flexbox ідеально підходить, коли потрібно акуратно вирівняти елементи.

Наприклад:

navigation links;
cards в одному row;
buttons;
profile sections;
hero layouts;
centered content.

До Flexbox центрування речей у CSS було схоже на спробу переконати кота виконувати інструкції.

Можливо?

Може бути.

Приємно?

Ні.

Створи Проєкт

Створи папку для цього уроку:

mkdir css-lesson5
cd css-lesson5
touch index.html
touch style.css

Ти маєш отримати:

css-lesson5/
  index.html
  style.css

Відкрий папку у своєму editor.

Ми побудуємо маленьку landing page з navigation і cards.

Це хороша вправа для Flexbox.

Просто.

Практично.

Без загадкового CSS-лабіринту.

Принаймні сьогодні.

Напиши HTML

Відкрий index.html і додай це:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layout з Flexbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <nav class="navbar">
      <h1 class="logo">FlexSite</h1>

      <div class="nav-links">
        <a href="#">Головна</a>
        <a href="#">Курси</a>
        <a href="#">Проєкти</a>
        <a href="#">Контакт</a>
      </div>
    </nav>

    <section class="hero">
      <div class="hero-text">
        <h2>Вивчай Flexbox Без Паніки</h2>
        <p>Flexbox допомагає вирівнювати і організовувати елементи з меншим хаосом і меншою кількістю драматичних зітхань.</p>
        <a href="#" class="button">Почати Навчання</a>
      </div>

      <div class="hero-box">
        <p>display: flex;</p>
      </div>
    </section>
  </header>

  <main class="page">
    <section class="cards">
      <article class="card">
        <h2>Вирівнюй</h2>
        <p>Розміщуй елементи саме там, де потрібно.</p>
      </article>

      <article class="card">
        <h2>Розподіляй</h2>
        <p>Контролюй простір між елементами.</p>
      </article>

      <article class="card">
        <h2>Організовуй</h2>
        <p>Створюй чисті rows і columns.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Створено під час вивчення CSS Flexbox.</p>
  </footer>
</body>
</html>

Ця сторінка має:

navigation bar;
logo;
links;
hero section;
text block;
visual box;
cards;
footer.

Ідеально для практики Flexbox.

Тепер треба змусити layout поводитися нормально.

Бажано ввічливо.

Почни з Базових Стилів

Відкрий style.css і додай:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

Це дає нам:

передбачувані розміри;
відсутність стандартного body margin;
простий font;
чисті links.

Хороша база.

Погана база робить layout болючим.

Як будувати сайт на мокрих спагеті.

Створи Flex Container

Щоб використати Flexbox, додаємо:

display: flex;

до container.

Приклад:

.navbar {
  display: flex;
}

Container стає flex container.

Прямі діти всередині нього стають flex items.

У цьому випадку:

<nav class="navbar">
  <h1 class="logo">FlexSite</h1>
  <div class="nav-links">...</div>
</nav>

.navbar — це flex container.

.logo і .nav-links — це flex items.

Додай це:

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

Тепер logo і links стоять в одному рядку.

Logo йде ліворуч.

Links йдуть праворуч.

Flexbox уже робить корисну роботу.

Підозріло корисну.

Але ми приймаємо.

Flex Direction

Property flex-direction контролює головний напрямок.

Значення за замовчуванням:

flex-direction: row;

Це означає, що елементи йдуть зліва направо.

Також можна використати:

flex-direction: column;

Це означає, що елементи йдуть зверху вниз.

Приклад:

.hero {
  display: flex;
  flex-direction: row;
}

Це розміщує children всередині hero поруч один з одним.

Додай це:

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
}

Тепер hero text і hero box стоять поруч.

Набагато краще, ніж два сумні блоки без плану.

justify-content

justify-content контролює вирівнювання по main axis.

Якщо flex-direction — це row, main axis горизонтальний.

Поширені значення:

justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

У navbar ми використали:

justify-content: space-between;

Це розштовхує елементи по різних краях.

Logo ліворуч.

Links праворуч.

Як нормальна navigation bar, яка знає свою роботу.

У hero ми також використали:

justify-content: space-between;

Це створює простір між text і box.

Flexbox фактично розставляє меблі.

Нарешті хтось у CSS поводиться як дорослий.

align-items

align-items контролює вирівнювання по cross axis.

Якщо flex-direction — це row, cross axis вертикальний.

Поширені значення:

align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: stretch;

Ми використали:

align-items: center;

Це центрує елементи вертикально.

Дуже корисно.

Дуже часто.

Дуже приємно.

Колись центрування речей було CSS-horror story.

Flexbox зробив це набагато менш драматичним.

Не повністю без драми.

Але менш драматичним.

gap

Property gap створює простір між flex items.

Приклад:

.nav-links {
  display: flex;
  gap: 20px;
}

Додай це:

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

Тепер navigation links мають чисті відступи.

Не потрібно додавати margin кожному link.

Немає маленьких боїв зі spacing.

Немає проблеми “чому останній елемент дивний?”.

gap прекрасний.

CSS іноді дарує нам подарунки.

Рідко, але реально.

Стилізуй Header і Hero

Додай ці styles:

.site-header {
  background-color: #111827;
  color: white;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.hero-text {
  max-width: 560px;
}

.hero-text h2 {
  font-size: 48px;
  margin: 0 0 16px;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

Тепер hero більше схожий на справжню section.

Button заокруглений.

Text читабельний.

Layout структурований.

Ніхто не плаче.

Чудовий прогрес.

Центрування з Flexbox

Flexbox відомий центруванням.

Щоб центрувати щось горизонтально і вертикально:

.hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

Додай це:

.hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 180px;
  background-color: #1f2937;
  border: 2px solid #374151;
  border-radius: 24px;
  font-size: 22px;
  font-weight: 700;
}

Тепер текст всередині .hero-box ідеально centered.

Це один з найкорисніших Flexbox patterns.

Маленьке диво.

Без древнього ритуалу.

Без CSS-свічок.

Без принесення клавіатури в жертву.

Cards з Flexbox

Тепер стилізуй cards section.

Додай:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.cards {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  background-color: white;
  padding: 28px;
  border-radius: 18px;
  border: 2px solid #e5e7eb;
}

.card h2 {
  margin-top: 0;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

Важлива частина:

.card {
  flex: 1;
}

Це каже кожній card займати однакову частину доступного простору.

Три cards.

Однакова ширина.

Чистий layout.

Без ручного калькулятора.

CSS рахує сам.

Постарайся не виглядати занадто здивованим.

Property flex

Property flex контролює, як flex items ростуть або стискаються.

Це:

flex: 1;

означає:

Дозволь цьому елементу рости і ділити доступний простір порівну.

Якщо всі cards мають flex: 1, вони стають однакової ширини.

Приклад:

.card {
  flex: 1;
}

Це дуже корисно для cards, columns і sections.

Але не використовуй flex: 1 всюди без думки.

CSS tools потужні.

Молоток корисний.

Але ти не чистиш ним зуби.

Footer

Додай:

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

Простий footer.

Без драми.

Іноді це найкращий footer.

Повний CSS

Твій style.css має виглядати так:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  background-color: #111827;
  color: white;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
}

.hero-text {
  max-width: 560px;
}

.hero-text h2 {
  font-size: 48px;
  margin: 0 0 16px;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

.hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 180px;
  background-color: #1f2937;
  border: 2px solid #374151;
  border-radius: 24px;
  font-size: 22px;
  font-weight: 700;
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.cards {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  background-color: white;
  padding: 28px;
  border-radius: 18px;
  border: 2px solid #e5e7eb;
}

.card h2 {
  margin-top: 0;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

Збережи.

Онови.

Сторінка тепер має мати:

navigation з logo і links;
hero text і box поруч;
content centered всередині hero box;
три однакові cards;
чистий spacing.

Це Flexbox робить свою роботу.

Тихо потужний.

Як developer, який полагодив production і не хвалився.

Рідкісна істота.

Типові Помилки

Додати display flex не тому елементу

Flexbox працює з direct children.

Якщо написати:

.card {
  display: flex;
}

це впливає на children всередині .card.

Це не організовує самі cards між собою.

Щоб організувати cards, додай Flexbox до їх parent:

.cards {
  display: flex;
}

Parent контролює children.

Це речення пояснює половину Flexbox.

І, можливо, трохи сімейної психології.

Забути gap

Без gap елементи можуть торкатися один одного.

Погано:

.cards {
  display: flex;
}

Краще:

.cards {
  display: flex;
  gap: 24px;
}

Spacing має значення.

Без відступів layout виглядає переповненим.

Ніби всі прийшли на вечірку і стали на кухні.

Використовувати Flexbox для всього

Flexbox чудовий для one-dimensional layouts.

Rows або columns.

Але для повних two-dimensional layouts CSS Grid часто кращий.

Flexbox не поганий.

Він просто не відповідь на кожне питання.

Не використовуй викрутку, щоб їсти суп.

Практика

Створи сторінку з:

navbar;
logo;
чотирма navigation links;
hero section;
двома hero columns;
трьома cards;
footer.

Використай Flexbox для:

navbar alignment;
navigation links;
hero layout;
card row;
centering однієї box.

Використай ці properties:

display: flex;
flex-direction;
justify-content;
align-items;
gap;
flex: 1.

Змінюй values і спостерігай, що відбувається.

CSS стає зрозумілим, коли експериментуєш.

А не коли дивишся на нього так, ніби він винен тобі гроші.

Міні-Завдання

Створи pricing section з трьома plans:

Basic;
Standard;
Premium.

Кожен plan має бути card.

Використай Flexbox, щоб cards стояли в одному row.

Дай кожній card однакову ширину через:

flex: 1;

Зроби Premium card помітнішою.

Додай button всередині кожної card.

Потім відцентруй button area за допомогою Flexbox.

Це реальний Flexbox з життя.

Cards.

Buttons.

Spacing.

Alignment.

Щоденний хліб frontend development.

Іноді хрусткий.

Але корисний.

Підсумок

Сьогодні ти дізнався, що:

Flexbox використовується для one-dimensional layouts;
display: flex створює flex container;
direct children стають flex items;
flex-direction контролює напрямок row або column;
justify-content контролює main-axis alignment;
align-items контролює cross-axis alignment;
gap створює простір між flex items;
flex: 1 дозволяє елементам ділити доступний простір;
Flexbox чудовий для navbars, cards, buttons і centering.

Flexbox — один із найважливіших CSS-інструментів.

Вивчи його добре.

Використовуй часто.

Але не використовуй абсолютно для всього.

Навіть піцу не варто їсти молотком.

Наступний Урок

У наступному уроці ми вивчимо CSS Grid.

Flexbox чудовий для одного напрямку.

Grid потужний для rows і columns разом.

Королівство layout розширюється.