CSS Flexbox шпаргалка українською

Кольорові книги різної висоти рівномірно розставлені на полиці — як елементи у Flexbox контейнері

Все, що потрібно знати про Flexbox — на одній сторінці. Тримай під рукою як довідник, коли треба швидко згадати, як працює justify-content чи flex-grow.

Якщо вивчаєш Flexbox з нуля — почни з уроку Flexbox частина 1, а потім переходь до Flexbox частина 2. Якщо потрібні паралельні рядки і колонки — дивись Grid шпаргалку.

Трохи історії

До 2012 року CSS-макети робили на float і table — технологіях, які для цього не призначені. "Як відцентрувати div?" — і досі один з найчастіших запитів в Google.

23 липня 2009 року W3C опублікували перший чорновик Flexbox. Ідея прийшла з XUL — технології, якою Firefox рендерить свій інтерфейс. Специфікацію переписували тричі з трьома різними синтаксисами (display: box → display: flexbox → display: flex). З 2019 по 2022 рік Flexbox з'явився на 41% → 74% всіх вебсайтів у світі.

Коли використовувати Flexbox?

Просте правило: один напрямок (рядок або колонка) — це Flexbox. Якщо потрібні і рядки, і колонки одночасно — це вже Grid.

Коли НЕ варто використовувати Flexbox

• Складна сітка з рядками І колонками — використовуй CSS Grid
• Текстова розкладка — для тексту достатньо звичайного block flow
• Один елемент без вирівнювання — якщо просто <div> під <div>, flex нічого не дає
• Таблиці даних — для табличних даних використовуй <table>, а не flex-хаки

Властивості контейнера

.container {
  display: flex; /* або inline-flex */
}

justify-content — вирівнювання по головній осі

justify-content — всі значення

align-items — вирівнювання по поперечній осі

align-items — всі значення

Властивості елементів

Фракції — як flex-grow ділить простір

Уяви піцу. Троє друзів замовили піцу і кожен хоче 1 частку — піцу ріжуть на 3 рівні шматки. Але якщо один каже "я хочу 2 частки" — піцу ріжуть на 4 шматки (2+1+1), і він отримує половину.

Саме так працює flex-grow:

/* Піца на 3 рівні шматки */
.item-a { flex-grow: 1; } /* 1/3 вільного простору */
.item-b { flex-grow: 1; } /* 1/3 вільного простору */
.item-c { flex-grow: 1; } /* 1/3 вільного простору */

/* Один хоче більше */
.item-a { flex-grow: 2; } /* 2/4 = половина вільного простору */
.item-b { flex-grow: 1; } /* 1/4 вільного простору */
.item-c { flex-grow: 1; } /* 1/4 вільного простору */

Фракції адаптуються під будь-який розмір екрана. Ця ж концепція використовується в CSS Grid (1fr, 2fr).

flex-grow — як елементи розширюються

flex-grow — візуалізація

flex-grow: 1 означає «забери увесь вільний простір». Якщо у двох елементів flex-grow: 1, вони ділять простір порівну. Якщо в одного flex-grow: 2, а в другого flex-grow: 1 — перший забере вдвічі більше зайвого простору.

flex-shrink — як елементи стискаються

flex-shrink — візуалізація

За замовчуванням всі елементи можуть стискатися (flex-shrink: 1). Поставиш flex-shrink: 0 — елемент збереже свій розмір, навіть якщо контейнер занадто малий. Корисно для іконок і логотипів.

Типові значення flex

order — візуальний порядок

order — візуальний порядок елементів

.item { order: -1; } /* перемістити на початок */
.item { order: 1; }  /* перемістити в кінець */

Готові рецепти

Центрування одного елемента

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Найвідоміший трюк CSS — три рядки замість 10 років болю з position: absolute.

Навігація: логотип зліва, меню справа

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

Рівні колонки

.columns {
  display: flex;
  gap: 1rem;
}
.columns > * {
  flex: 1;
}

Скільки б елементів не було — поділять простір порівну.

Картки з переносом (responsive)

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 280px;
}

Кожна картка хоче бути 280px, але якщо є місце — росте. Якщо ні — переноситься на новий рядок.

Sticky footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

main забере всю вільну висоту, footer завжди притиснеться до низу.

Прижати один елемент до краю

.toolbar {
  display: flex;
  gap: 1rem;
}
.logout-btn {
  margin-left: auto;
}

Всі кнопки ліворуч, але одна (наприклад, «Logout») — праворуч. margin-left: auto поглинає весь вільний простір зліва.

Часті помилки

• Вертикальне центрування не працює? Перевір, що align-items: center стоїть на контейнері з display: flex, а у контейнера є висота (min-height: 100vh для повного екрана).
• Елементи не переносяться на новий рядок? За замовчуванням flex-wrap: nowrap — додай flex-wrap: wrap.
• Картинка стиснулась? За замовчуванням flex-shrink: 1. Постав flex-shrink: 0 на елементи, які мають зберігати розмір.
• justify-content: center не центрує по вертикалі? Бо justify-content — це головна вісь. При flex-direction: row головна вісь — горизонтальна. Для вертикалі при row потрібен align-items: center.
• gap не працює? Браузер занадто старий. Підтримка з 2021 року, але якщо потрібно для legacy — використовуй margin.