Пошук уроків, статей та іншого контенту
Навчіться вмикати Flexbox для контейнера та зрозумійте різницю між flex-контейнером і flex-елементами.
Flexbox — це CSS-модель розкладки, яка допомагає розміщувати елементи в рядок або стовпчик і керувати їхнім вирівнюванням.
Щоб увімкнути Flexbox, потрібно додати властивість display: flex до батьківського елемента:
.container {
display: flex;
}Елемент із
Його безпосередні дочірні елементи автоматично стають flex-елементами.
Розглянемо просту HTML-структуру:
<div class="container">
<div class="item">Перший</div>
<div class="item">Другий</div>
<div class="item">Третій</div>
</div>У цьому прикладі:
.container — батьківський елемент і flex-контейнер;
.item — безпосередні дочірні елементи;
після додавання display: flex усі .item стають flex-елементами.
CSS:
.container {
display: flex;
}За замовчуванням flex-елементи розташовуються в один рядок зліва направо.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Приклад Flexbox</title>
<style>
.container {
display: flex;
gap: 10px;
padding: 10px;
background-color: #e5e7eb;
}
.item {
padding: 20px;
background-color: #60a5fa;
color: white;
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Перший</div>
<div class="item">Другий</div>
<div class="item">Третій</div>
</div>
</body>
</html>Властивість gap додає однаковий проміжок між flex-елементами. Вона не вмикає Flexbox — для цього потрібен саме display: flex.
Flexbox працює для елемента, на якому встановлено display: flex:
.container {
display: flex;
}Але не всі елементи всередині сторінки стають flex-елементами. Flex-елементами є лише безпосередні дочірні елементи контейнера.
<div class="container">
<div class="item">
<span>Текст</span>
</div>
</div>У цьому прикладі:
.container — flex-контейнер;
.item — flex-елемент;
span не є безпосереднім flex-елементом контейнера, тому що він знаходиться всередині .item.
Це можна уявити так:
.container
├── .item ← flex-елемент
│ └── span ← не flex-елемент контейнераЯкщо потрібно застосувати Flexbox до .item, його також треба зробити flex-контейнером:
.container {
display: flex;
}
.item {
display: flex;
}Тепер .container керує розташуванням елементів .item, а .item керує розташуванням свого span.
Після display: flex елементи за замовчуванням розміщуються горизонтально:
.container {
display: flex;
}Візуально це виглядає приблизно так:
[Перший] [Другий] [Третій]У Flexbox є головна вісь, уздовж якої розташовуються елементи. За замовчуванням вона спрямована зліва направо.
Якщо потрібно розташувати елементи вертикально, використовується flex-direction: column:
.container {
display: flex;
flex-direction: column;
}Результат:
[Перший]
[Другий]
[Третій]Властивість flex-direction змінює напрямок розташування flex-елементів, але сам Flexbox все одно вмикається через display: flex.
Важливо розрізняти, до якого елемента застосовується CSS-властивість.
Такі властивості задають на батьківському елементі:
.container {
display: flex;
flex-direction: row;
gap: 16px;
}Контейнер визначає:
чи використовується Flexbox;
напрямок розташування дочірніх елементів;
проміжки між елементами;
вирівнювання елементів.
Такі властивості задають на безпосередніх дочірніх елементах:
.item {
flex-grow: 1;
}У цьому випадку .item може займати додатковий вільний простір контейнера.
На початковому етапі достатньо запам’ятати основне правило:
display: flexвстановлюють на батьківському елементі, щоб його безпосередні дочірні елементи стали flex-елементами.
display: flex і display: inline-flexДля початку найчастіше використовується:
.container {
display: flex;
}Такий контейнер поводиться як блочний елемент: зазвичай займає доступну ширину та починається з нового рядка.
Існує також значення inline-flex:
.container {
display: inline-flex;
}Воно теж перетворює дочірні елементи на flex-елементи, але сам контейнер поводиться як рядковий елемент і може розташовуватися поруч з іншим вмістом.
У цій ситуації головна ідея залишається тією самою:
display: flex — flex-контейнер із блочним зовнішнім типом;
display: inline-flex — flex-контейнер із рядковим зовнішнім типом.
Для більшості перших прикладів достатньо display: flex.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Картки на Flexbox</title>
<style>
.cards {
display: flex;
gap: 16px;
}
.card {
padding: 24px;
border: 2px solid #2563eb;
border-radius: 8px;
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="cards">
<article class="card">Картка 1</article>
<article class="card">Картка 2</article>
<article class="card">Картка 3</article>
</div>
</body>
</html>У прикладі:
.cards — flex-контейнер;
кожен article.card — flex-елемент;
gap: 16px створює відступи між картками;
картки розташовуються в рядок, тому що стандартний напрямок Flexbox — row.
display: flex додано не до батьківського елементаНеправильно:
.item {
display: flex;
}Це зробить .item flex-контейнером, але не розташує самі .item в рядок.
Правильно:
.container {
display: flex;
}Flex-елементами стають лише безпосередні дочірні елементи.
<div class="container">
<div class="item">
<span>Текст</span>
</div>
</div>У цьому прикладі span не є flex-елементом .container.
Якщо потрібно розташувати кнопки в рядок, display: flex потрібно додати до елемента, який містить ці кнопки:
<div class="buttons">
<button>Зберегти</button>
<button>Скасувати</button>
</div>.buttons {
display: flex;
gap: 8px;
}display: flex і gapdisplay: flex вмикає Flexbox:
.container {
display: flex;
}gap лише додає проміжки між дочірніми елементами:
.container {
gap: 12px;
}Зазвичай вони використовуються разом, але виконують різні завдання.
display: flex вмикає Flexbox для елемента.
Елемент із display: flex називають flex-контейнером.
Безпосередні дочірні елементи flex-контейнера стають flex-елементами.
За замовчуванням flex-елементи розташовуються в рядок зліва направо.
flex-direction: column змінює напрямок на вертикальний.
gap задає проміжки між flex-елементами.
Якщо потрібно застосувати Flexbox до вкладеного елемента, йому потрібно окремо задати display: flex.