Flexbox — частина 2

CSS Flexbox grow та shrink — акордеон що розтягується і стискається

У минулому уроці ми навчилися вирівнювати елементи через justify-content та align-items. Тепер розберемо, як flex-елементи ростуть, стискаються та переносяться на новий рядок.

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

За замовчуванням всі flex-елементи намагаються вміститися в один рядок, навіть якщо їм не вистачає місця (вони стискаються):

.container {
  display: flex;
  flex-wrap: nowrap; /* за замовчуванням — все в один рядок */
}

Щоб дозволити перенос:

.container {
  display: flex;
  flex-wrap: wrap; /* елементи переносяться на новий рядок */
}

nowrap (за замовчуванням):
┌──────────────────────────────┐
│ [1][2][3][4][5][6][7][8][9]  │  ← стискаються
└──────────────────────────────┘

wrap:
┌──────────────────────────────┐
│ [1]  [2]  [3]  [4]  [5]     │
│ [6]  [7]  [8]  [9]          │  ← переносяться
└──────────────────────────────┘

flex-grow — як елемент росте

flex-grow визначає, яку частину вільного простору займе елемент:

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

flex-grow: 0 (за замовчуванням):
│ [item1][item2][item3]         вільний простір          │

flex-grow: 1 (на всіх):
│ [====item1====][====item2====][====item3====]          │

flex-grow: 1, 2, 1:
│ [==item1==][======item2======][==item3==]              │

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

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

flex-shrink визначає, наскільки елемент може зменшитися, коли місця не вистачає:

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

flex-basis — початковий розмір

flex-basis — розмір елемента перед розподілом вільного простору (замість width):

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

Скорочення flex

Замість трьох окремих властивостей використовуй скорочення flex:

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

Найчастіші патерни:

order — зміна порядку

За замовчуванням елементи відображаються в порядку HTML. order дозволяє змінити це:

.first  { order: 2; }  /* відобразиться другим */
.second { order: 1; }  /* відобразиться першим */
.third  { order: 3; }  /* відобразиться третім */

За замовчуванням order: 0. Менше число — раніше відображається.

align-self — вирівнювання одного елемента

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

.container { display: flex; align-items: flex-start; }
.special { align-self: flex-end; } /* тільки цей — знизу */

Практика: sidebar layout

Класична розкладка — бічна панель + основний контент:

<div class="layout">
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main content</main>
</div>

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 250px;       /* фіксовано 250px, не росте, не стискається */
  background: #1a1a2e;
  color: white;
  padding: 2rem;
}

.content {
  flex: 1;               /* займає все інше місце */
  padding: 2rem;
}

Практика: адаптивні картки

Картки, які переносяться на новий рядок і рівномірно розподіляються:

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

.card {
  flex: 1 1 280px;  /* мінімум 280px, росте рівномірно */
  padding: 1.5rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

Це дає responsive поведінку без media queries: якщо картка не вміщується (менше 280px) — переноситься на новий рядок.

Підсумок

• flex-wrap: wrap — дозволяє перенос на новий рядок (ключ для responsive)
• flex-grow — пропорція зростання (1 = займає вільний простір)
• flex-shrink — стискання (0 = не стискається)
• flex-basis — початковий розмір (замість width)
• flex: 1 — скорочення для рівних часток
• flex: 0 0 250px — фіксований розмір
• order — зміна порядку відображення

Що далі?

У наступному уроці вивчимо CSS Grid — двовимірну систему розкладки для складних сіток та layouts.