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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sticky footer

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

main {
  flex: 1;
}

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

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

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

.columns > * {
  flex: 1;
}

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

Адаптивна навігація з логотипом і пунктами

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

.nav-links {
  display: flex;
  gap: 1.5rem;
}

Логотип ліворуч, пункти меню праворуч — класичний паттерн без жодного хака.

Картки, які переносяться (з мінімальною шириною)

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

.card {
  flex: 1 1 280px;
}

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

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

.toolbar {
  display: flex;
  gap: 1rem;
}

.spacer {
  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.