Flexbox шпаргалка — всі властивості з прикладами

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

Уяви, що ти розставляєш меблі в кімнаті. Хочеш диван по центру? Стіл притиснути до стіни? Рівномірно розставити стільці навколо столу? В реальному житті це інтуїтивно — а от у CSS це було пеклом.

Як розробники страждали до Flexbox

До 2012 року CSS-макети робили на float і table — технологіях, які для цього взагалі не призначені. float створили, щоб текст обтікав картинку. <table> — щоб показувати табличні дані. Але інших інструментів не було, тому розробники хакали ці властивості роками.

Хочеш відцентрувати елемент вертикально? Ось що доводилося писати:

/* 💀 Вертикальне центрування до Flexbox */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* а до 2012 і цього не було */
}

"Як відцентрувати div?" — і досі один з найчастіших запитів в Google. Це як запитувати "як поставити стілець посеред кімнати" — має бути просто, але в CSS це було квестом рівня "Святий Грааль". До речі, Holy Grail Layout — це реальний термін: трьохколонковий макет, який ~15 років не могли нормально реалізувати на чистому CSS.

Flexbox — як це вирішили

23 липня 2009 року W3C опублікували перший чорновик специфікації Flexbox. Ідея була взята з XUL — технології, якою Mozilla Firefox рендерить свій інтерфейс. Якщо Firefox може гнучко розташовувати кнопки та панелі — чому б не дати це всьому вебу?

Специфікацію переписували тричі з трьома різними синтаксисами — рідкість навіть для CSS:

2009: display: box (на основі XUL)
2011: display: flexbox (проміжний варіант, тільки IE10)
2012: display: flex (фінальний, сучасний синтаксис)

Результат вартий очікування: з 2019 по 2022 рік Flexbox з'явився на 41% → 74% всіх вебсайтів у світі. Сьогодні це стандарт індустрії — 98% розробників використовують його щодня.

А вертикальне центрування? Тепер три рядки:

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

Це як різниця між "пересунь всі меблі, зміни підлогу і перебудуй стіну" і "постав стілець по центру". Flexbox дав CSS те, що мав мати з самого початку.

Ця шпаргалка — твій швидкий довідник. Зберігай у закладки і повертайся, коли забудеш яку властивість використати.

Як працює Flexbox за 30 секунд

Flexbox працює у двох напрямках: головна вісь (main axis) і поперечна вісь (cross axis). За замовчуванням головна вісь — горизонтальна (зліва направо), поперечна — вертикальна (зверху вниз).

Осі Flexbox — головна та поперечна вісь

Є два типи властивостей:

Контейнер (display: flex) — керує розташуванням дочірніх елементів
Елементи — керують поведінкою кожного окремого елемента

Властивості контейнера (батька)

`display: flex`

Перетворює елемент на flex-контейнер. Всі прямі дочірні елементи стають flex-елементами.

.container {
  display: flex; /* або inline-flex для рядкового контейнера */
}

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

Значення	Результат
`row`	Горизонтально, зліва направо (за замовчуванням)
`row-reverse`	Горизонтально, справа наліво
`column`	Вертикально, зверху вниз
`column-reverse`	Вертикально, знизу вгору

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

.container {
  display: flex;
  justify-content: center; /* одне з значень нижче */
}

Значення	Що робить
`flex-start`	Притискає до початку (за замовчуванням)
`flex-end`	Притискає до кінця
`center`	По центру
`space-between`	Рівні проміжки між елементами, перший і останній — до країв
`space-around`	Рівні проміжки навколо кожного елемента
`space-evenly`	Абсолютно рівні проміжки між усіма елементами і краями

justify-content — всі значення візуально

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

Значення	Що робить
`stretch`	Розтягує на всю висоту (за замовчуванням)
`flex-start`	Притискає до верху
`flex-end`	Притискає до низу
`center`	По центру вертикально
`baseline`	Вирівнює по базовій лінії тексту

`flex-wrap` — перенос рядків

.container {
  display: flex;
  flex-wrap: wrap; /* дозволяє перенос */
}

Значення	Результат
`nowrap`	Все в один рядок (за замовчуванням)
`wrap`	Переносить на наступний рядок
`wrap-reverse`	Переносить у зворотному порядку

`gap` — відступи між елементами

.container {
  display: flex;
  gap: 16px;       /* однаковий з усіх боків */
  gap: 16px 24px;  /* рядок колонка */
}

Замінює хаки з margin — чисто і передбачувано.

`align-content` — вирівнювання рядків при `flex-wrap: wrap`

Працює тільки коли є кілька рядків. Значення ті ж, що й у justify-content.

Властивості елементів (дітей)

Фракції — новий спосіб мислення в CSS

Перед тим як розбирати flex-grow та flex-shrink, важливо зрозуміти концепцію фракцій — вона змінює спосіб, як ми думаємо про розміри в CSS.

Раніше ти задавав розміри конкретно: width: 200px або width: 50%. Фракції працюють інакше — це частки від доступного простору.

Уяви піцу. Якщо троє друзів замовили піцу і кожен хоче 1 частку — піцу ріжуть на 3 рівні шматки (1+1+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), тому зрозумівши її зараз — ти будеш готовий до Grid.

`flex-grow` — як елемент займає вільний простір

.item { flex-grow: 1; } /* займає весь доступний простір */
.item { flex-grow: 0; } /* не розтягується (за замовчуванням) */

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

flex-grow — як елементи ділять вільний простір

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

.item { flex-shrink: 1; } /* стискається за потреби (за замовчуванням) */
.item { flex-shrink: 0; } /* НЕ стискається — зберігає свій розмір */

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

`flex-basis` — базовий розмір перед розподілом простору

.item { flex-basis: 200px; } /* стартовий розмір 200px */
.item { flex-basis: auto; }  /* розмір з контенту (за замовчуванням) */

`flex` — скорочення (використовуй це!)

.item { flex: 1; }         /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
.item { flex: 0 0 200px; } /* не росте, не стискається, 200px */
.item { flex: 1 1 auto; }  /* росте і стискається від свого розміру */

`align-self` — індивідуальне вирівнювання

Перевизначає align-items для окремого елемента:

.item { align-self: center; } /* цей елемент по центру, решта як задано */

`order` — порядок елемента

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

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

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

Навігаційне меню — логотип зліва, посилання справа, все вирівняне вертикально
Картки в рядок — товари, статті, команда — з переносом на менших екранах
Центрування — будь-що по вертикалі та/або горизонталі
Хедер/футер — елементи в рядок з різним вирівнюванням
Форми — лейбл + інпут + кнопка в один рядок
Sidebar + контент — фіксований sidebar, контент займає залишок

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

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

Правило великого пальця: якщо елементи розташовуються в одному напрямку (рядок АБО колонка) — Flexbox. Якщо потрібні два напрямки одночасно — Grid.

5 патернів, які покривають 90% задач

1. Центрування елемента

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

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

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3. Рівномірні колонки

.grid {
  display: flex;
  gap: 16px;
}
.grid > * {
  flex: 1; /* кожна колонка однакового розміру */
}

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

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 300px; /* мінімум 300px, росте якщо є місце */
}

5. Footer внизу сторінки

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1; /* займає весь вільний простір */
}

Інтерактивні ігри для вивчення Flexbox

Найкращий спосіб запам'ятати Flexbox — пограти в ці безкоштовні ігри:

Flexbox Froggy — допоможи жабкам дістатися до лілій, використовуючи Flexbox-властивості. Є українська версія! 24 рівні від простого до складного
Flexbox Defense — tower defense гра, де ти розставляєш вежі за допомогою Flexbox. 12 рівнів
Flexbox Zombies — навчальна гра з сюжетом, де ти стріляєш по зомбі вирівнюючи приціл через flex-властивості
Flexbox Adventure — RPG-гра, де ти проходиш рівні за допомогою CSS Flexbox

Корисні відео та ресурси

CSS Flexbox in 100 Seconds — Fireship — якщо хочеш зрозуміти суть за 2 хвилини (англ.)
Learn Flexbox the Easy Way — Kevin Powell — 34 хв від "короля CSS", найкраще відео для початківців (англ.)
Flexbox Crash Course — Traversy Media — повний crash course з практичним проєктом (англ.)
What The Flexbox?! — Wes Bos — безкоштовний курс з 20 відео, повністю присвячений Flexbox (англ.)
CSS-Tricks: A Complete Guide to Flexbox — найпопулярніший візуальний довідник (англ.)
Yoksel Flex Cheatsheet — інтерактивна шпаргалка з демо кожної властивості

Практикуйся

Відкрий DevTools у браузері, створи контейнер і пограйся з властивостями — побачиш результат миттєво. Спробуй відтворити кожен з 5 патернів вище — і Flexbox стане інтуїтивним.

Хочеш розібрати Flexbox покроково з практичними завданнями? Подивись наш урок з Flexbox (частина 1) та частина 2 у безкоштовному курсі веб-розробки.