CSS flexbox макет
Що таке Flexbox?
Flexbox (Гнучка коробка) — це модель верстки CSS, призначена для одновимірних версток — розташування елементів у рядку або стовпці з гнучким розміром і вирівнюванням.
Увімкнення Flexbox
css
.container {
display: flex; /* або inline-flex */
}Усі безпосередні нащадки контейнера flex стають flex items.
Головна вісь і поперечна вісь
Flexbox працює вздовж двох осей:
- Головна вісь — визначається
flex-direction(за замовчуванням: горизонтальна, зліва направо) - Поперечна вісь — перпендикулярна до головної осі
css
.container {
display: flex;
flex-direction: row; /* Головна вісь: горизонтальна (за замовчуванням) */
/* flex-direction: column; Головна вісь: вертикальна */
}Властивості контейнера
| Властивість | Опис |
|---|---|
flex-direction | Напрямок елементів: row, row-reverse, column, column-reverse |
flex-wrap | Чи обгортати елементи: nowrap, wrap, wrap-reverse |
justify-content | Вирівнювання вздовж головної осі: flex-start, center, space-between, space-around, space-evenly |
align-items | Вирівнювання вздовж поперечної осі: stretch, flex-start, center, flex-end, baseline |
align-content | Вирівнювання обгорнутого рядка: ті ж значення, що й justify-content |
gap | Відстань між flex items |
Приклад: Центрування контенту
css
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}Властивості елементів
| Властивість | Опис |
|---|---|
flex-grow | Наскільки елемент має рости відносно інших (за замовчуванням: 0) |
flex-shrink | Наскільки елемент має зменшуватися відносно інших (за замовчуванням: 1) |
flex-basis | Початковий розмір перед ростом/зменшенням (за замовчуванням: auto) |
flex | Скорочена форма для flex-grow flex-shrink flex-basis |
align-self | Переважити align-items для одного елемента |
order | Змінити візуальний порядок без зміни HTML |
Приклад: Гнучкі елементи
css
.sidebar { flex: 0 0 250px; } /* Фіксовані 250px, не росте, не зменшується */
.main { flex: 1; } /* Займає весь залишковий простір */
.aside { flex: 0 0 200px; } /* Фіксовані 200px */Загальні шаблони Flexbox
Навігаційна панель
css
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}Карти однакової висоти
css
.cards {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.card {
flex: 1 1 300px; /* Рости, зменшуватися, мінімум 300px */
}Липкий футер
css
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1; }Важливо:
Flexbox найкраще підходить для одновимірних версток (один рядок або стовпець). Для двовимірних версток (ряди І стовпці одночасно) використовуйте CSS Grid. На практиці flex і grid часто комбінуються.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.