Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке Flexbox?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Flexbox - це модель розкладки в CSS, призначена для **зручного вибудовування елементів в одному напрямку: у рядок або в колонку**. Вона дозволяє легко вирівнювати, розподіляти і змінювати порядок елементів усередині контейнера без використання float, таблиць і хаотичних відступів.

---

### **Ключові особливості Flexbox**

- працює всередині **flex-контейнера** (`display: flex`)
- напрямок можна обрати: **по горизонталі або вертикалі** (`flex-direction`)
- елементи можуть **розтягуватися, стискатися і розподілятися** рівномірно
- є **гнучке центрування за обома осями** (`justify-content` і `align-items`)
- порядок елементів можна змінювати **без зміни HTML** (`order`)

---

### **Як це виглядає в CSS**

```css
.container {
  display: flex;
  flex-direction: row;        /* або column */
  justify-content: center;    /* вирівнювання по головній осі */
  align-items: center;        /* вирівнювання по поперечній осі */
}
```

---

### **Для чого застосовується Flexbox**

- створення горизонтальних меню
- вирівнювання елементів по центру (вертикально і горизонтально)
- картки в ряд з однаковими відступами
- адаптивні блоки, які самі стискаються і розтягуються
- керування відстанями між елементами без margin-милиць

---

**Суть в одному реченні:**
**Flexbox - це гнучка одноосьова система розкладки, яка спрощує розташування і вирівнювання елементів усередині контейнера.**

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати181 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.