Flexbox — частина 1

CSS Flexbox — пасажири автобуса розсаджені вздовж осей

У попередніх уроках ми позиціонували елементи через display, position та margin: 0 auto. Це працює, але часто незручно. Flexbox — сучасний інструмент, який вирішує більшість задач вирівнювання елегантно та просто.

Що таке Flexbox?

Flexbox (Flexible Box Layout) — модель розкладки, яка дозволяє розподіляти простір між елементами та вирівнювати їх в одному напрямку (рядку або стовпці).

Два ключові поняття:

.container {
  display: flex; /* дочірні елементи тепер flex items */
}

Осі Flexbox

Flexbox працює з двома осями:

Осі Flexbox: main axis та cross axis

• Головна вісь (main axis) — напрямок, в якому розташовуються елементи (за замовчуванням — горизонтально)
• Поперечна вісь (cross axis) — перпендикулярна головній

Запам'ятай: justify-content — по головній осі, align-items — по поперечній.

flex-direction — напрямок

.container { display: flex; flex-direction: row; }          /* → за замовчуванням */
.container { display: flex; flex-direction: row-reverse; }   /* ← справа наліво */
.container { display: flex; flex-direction: column; }        /* ↓ зверху вниз */
.container { display: flex; flex-direction: column-reverse; } /* ↑ знизу вверх */

justify-content — по головній осі

Розподіляє елементи вздовж головної осі:

.container {
  display: flex;
  justify-content: flex-start; /* за замовчуванням */
}

justify-content: 6 значень

align-items — по поперечній осі

Вирівнює елементи вздовж поперечної осі (за замовчуванням — вертикально):

.container {
  display: flex;
  height: 200px;
  align-items: stretch; /* за замовчуванням */
}

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

Ідеальне центрування

Найпростіший спосіб центрувати що завгодно — по горизонталі та вертикалі одночасно:

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

Три рядки CSS — і елемент ідеально по центру. Порівняй з position: absolute + transform: translate(-50%, -50%) з минулого уроку.

gap — проміжки між елементами

Замість margin для кожного елемента використовуй gap:

.container {
  display: flex;
  gap: 16px;        /* однаковий проміжок */
  gap: 16px 24px;   /* row-gap column-gap */
}

Практика: навігація сайту

<nav class="navbar">
  <a href="/" class="logo">MySite</a>
  <div class="nav-links">
    <a href="/about">Про нас</a>
    <a href="/services">Послуги</a>
    <a href="/contact">Контакти</a>
  </div>
</nav>

.navbar {
  display: flex;
  justify-content: space-between; /* лого зліва, посилання справа */
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1a1a2e;
}

.logo {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
}

.nav-links {
  display: flex;  /* вкладений flex! */
  gap: 2rem;
}

.nav-links a {
  color: #a0aec0;
  text-decoration: none;
}

.nav-links a:hover {
  color: white;
}

Зверни увагу: .nav-links — теж flex-контейнер. Flexbox можна вкладати скільки завгодно.

Практика: картки в ряд

<div class="cards">
  <div class="card">
    <h3>HTML</h3>
    <p>Структура сторінки</p>
  </div>
  <div class="card">
    <h3>CSS</h3>
    <p>Зовнішній вигляд</p>
  </div>
  <div class="card">
    <h3>JavaScript</h3>
    <p>Інтерактивність</p>
  </div>
</div>

.cards {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

.card {
  width: 200px;
  padding: 1.5rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  text-align: center;
}

Підсумок

• display: flex — перетворює елемент на flex-контейнер
• flex-direction — напрямок: row (горизонтально) або column (вертикально)
• justify-content — вирівнювання по головній осі (space-between, center, flex-start/end)
• align-items — вирівнювання по поперечній осі (center, flex-start/end, stretch)
• gap — проміжки між елементами (замість margin)
• Центрування — justify-content: center + align-items: center

Що далі?

У наступному уроці вивчимо Flexbox частина 2 — як елементи ростуть та стискаються (flex-grow, flex-shrink, flex-basis), перенос рядків (flex-wrap) та складніші layouts.