Повне керівництво із Flexbox у CSS
- Таїсія Красноштан
- 7 годин тому
- Читати 10 хв
Світ веб-верстки довгий час був полем експериментів: спочатку ми використовували таблиці для розміщення блоків, потім боролися з float-ами, а після цього перейшли на inline-block. Кожен із цих методів мав свої обмеження, складності та підводні камені. Але з появою Flexbox усе змінилося. Це прорив у веброзробці, який дозволяє контролювати розміщення елементів надзвичайно просто і гнучко.
Своїм досвідом роботи із Flexbox з нами поділився Давид Дубляков, Front-end engineer в компанії AutoDoc. Він розповів, як Flexbox застосовується на практиці, у яких випадках він є оптимальним вибором і які його обмеження.
Що таке Flexbox
Flexbox (CSS Flexible Box Layout Module) — це сучасний інструмент для організації адаптивної, динамічної верстки. Він дозволяє легко розподіляти простір між елементами, вирівнювати їх у будь-якому напрямку та створювати складні компоненти без зайвих хаків та громіздких CSS-правил. Основна перевага Flexbox — це спрощення верстки без використання застарілих методів, таких як float або inline-block.
Чому з'явився Flexbox
До його появи верстальники використовували:
Таблиці (<table>) — негнучкий метод, який не відповідає сучасним стандартам веб-дизайну.
Float (float: left/right;) — застосовувався для створення колонок, але вимагав громіздких хаків (clearfix).
Inline-block (display: inline-block;) — зручніший за float, проте мав проблему з невидимими відступами між елементами.
Flexbox вирішує ці проблеми, даючи розробникам можливість легко керувати розташуванням і розмірами блоків без зайвого коду.
Уявіть собі коробку, що складається з кількох відділів, розмір яких автоматично змінюється залежно від наявного простору, при цьому кожен відділ може бути вирівняний за певними критеріями. Flexbox працює за таким самим принципом, забезпечуючи динамічне розташування елементів.
Перший досвід роботи з Flexbox був для мене, мабуть, у 2019 році, коли я випадково зустрів його в прикладі коду, — ділиться Давид Дубляков. — Це було щось просте, і я навіть не звернув особливої уваги. Але вже у 2020 році інші розробники порадили мені пройти через FLEXBOX FROGGY. Цей ресурс допоміг швидко зрозуміти основні принципи роботи з Flexbox, при цьому у формі гри. Сьогодні майже в будь-якій, навіть найпростішій веброзробці, можна зустріти використання flexbox. Зараз це вже must-have.
Як працює Flexbox
Flexbox — це потужний модуль для створення гнучких макетів. Він дозволяє легко розташовувати, вирівнювати та розтягувати елементи в контейнері без використання float або position. Flexbox базується на двох осях:
Головна вісь (main axis) — елементи розташовуються вздовж цієї осі (горизонтально чи вертикально, залежно від налаштувань).
Поперечна вісь (cross axis) — елементи можна вирівнювати по цій осі (перпендикулярно до головної осі).
У вас є flex-контейнер (батьківський елемент), в якому знаходяться flex-елементи (дочірні елементи).
«Flexbox є найкращим рішенням для адаптивного дизайну, — зазначає Давид, — а також, коли структура блоків здебільшого однолінійна — по горизонталі чи вертикалі».
Втім, є й випадки, коли розробник не рекомендує використовувати Flexbox.
Якщо є потреба вирівнювання при великому вкладенні елементів — це може перетворитись в зайвий boilerplate flex-container’ів, — пояснює він. — Якщо ж вам потрібне жорстке вирівнювання по певній сітці чи 2D, то звісно, з цим набагато простіше впорається grid. Інколи також можу використовувати inline-block і позиціювання елементів за допомогою властивості position як альтернативу Flexbox.
Напрямок осей визначається через властивість flex-direction.
Ключові поняття
Main axis – це основна вісь, уздовж якої будуть вирівнюватися елементи (горизонтально або вертикально, залежно від налаштувань).
Cross axis – це поперечна вісь, яка перпендикулярна до основної.
Main-start | main-end – початок і кінець головної осі, звідки і куди шикуються елементи.
Cross-start | cross-end – початок і кінець поперечної осі.
Main size – ширина або висота елемента вздовж головної осі.
Cross size – ширина або висота елемента вздовж поперечної осі.
Головне правило: спочатку задайте display: flex для контейнера, а потім налаштуйте flex-direction, justify-content і align-items, щоб отримати потрібний макет.
Приклад без Flexbox (за допомогою float)
html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
css
.container {
overflow: hidden;
}
.item {
float: left;
width: 30%;
margin: 1%;
background-color: lightgray;
text-align: center;
padding: 20px;
}
Проблеми: громіздке очищення потоку, складне керування відступами
Приклад із Flexbox
css
.container {
display: flex;
justify-content: space-between;
}
.item {
width: 30%;
background-color: lightgray;
text-align: center;
padding: 20px;
}
Переваги: простий код, рівномірний розподіл, легке управління позиціями.
Flexbox спрощує верстку, усуваючи необхідність у маніпуляціях з float або inline-block, що робить код чистішим і більш адаптивним.
Щодо найтиповіших завдань, — розповідає Давид, — то Flexbox дуже добре підходить для вирівнювання декількох блоків одночасно — як по вертикалі, так і по горизонталі. Також для гнучких відступів між блоками й автоматичного перенесення елементів у новий рядок. Flexbox робить ці завдання дуже простими.
Як працює display: flex
Як активувати Flexbox?
Щоби почати використовувати Flexbox, потрібно додати до батьківського контейнера властивість display: flex;. Це перетворює його на flex-контейнер, а всі дочірні елементи автоматично стають гнучкими та отримують можливість адаптуватися до розміру контейнера. Вони можуть змінювати своє положення, ширину та висоту залежно від налаштувань контейнера, таких як напрямок розташування, вирівнювання та розподіл простору.
Що є «батьками», а що — «дітьми» в цій моделі?
Батьківський елемент — це контейнер, до якого застосовується display: flex;. Він визначає, як будуть розташовані й вирівнюватися елементи всередині нього.
Дочірні елементи — це всі елементи, що знаходяться всередині flex-контейнера. Вони автоматично підпорядковуються правилам вирівнювання та розміщення, заданим для батьківського контейнера.
Приклад:
css
.container {
display: flex;
background-color: lightgray;
}
.item {
width: 100px;
height: 100px;
background-color: steelblue;
}
html
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Результат: усі .item елементи будуть вирівняні в один ряд (горизонтально) — це стандартна поведінка display: flex;.
Відмінність між display: flex; та display: inline-flex;
display: flex; — контейнер займає всю доступну ширину і вирівнює елементи всередині на основі заданих параметрів (наприклад, напрямок, вирівнювання).
display: inline-flex; — контейнер поводиться як inline-елемент, займаючи лише необхідний простір, що потрібен для розміщення його дочірніх елементів. Це означає, що контейнер може бути частиною рядка, не розтягується на всю ширину.
Приклад:
css
.inline-container {
display: inline-flex;
border: 2px solid black;
}
Цей контейнер буде лише такої ширини, яка необхідна для розміщення його дочірніх елементів.
Наприклад, у створенні адаптивного дизайну Flexbox — це дійсно крутий інструмент, — додає спікер. — Простота й ефективність полягають у його гнучкості. Він надає елементам і відступам автоматично розрахований простір залежно від того, які властивості ви надасте контейнеру та самим елементам. Ви можете налаштувати відображення елементів залежно від ширини екрана. Головне — правильно налаштувати властивості, а Flexbox зробить решту «магії» за вас.
Властивості flex-контейнера
Flexbox надає низку потужних властивостей, які дозволяють детально налаштовувати розташування елементів у контейнері. Розглянемо кожну з них.
flex-direction
Ця властивість визначає напрямок основної осі контейнера, що впливає на розташування елементів у рядку або стовпці. За замовчуванням елементи розташовуються в ряд (горизонтально), але можна змінити напрямок на вертикальний або навіть змінити порядок елементів.
Значення:
row (за замовчуванням) – елементи розташовуються зліва направо.
row-reverse – елементи розташовуються справа наліво.
column – елементи шикуються зверху вниз.
column-reverse – порядок елементів зверху вниз, але у зворотному напрямку.
Приклад коду:
css
.container {
display: flex;
flex-direction: column;
}
Цей код змінює напрямок розташування елементів на вертикальний.
justify-content
Ця властивість визначає вирівнювання елементів вздовж головної осі (горизонтально для row або вертикально для column). Вона дозволяє контролювати розподіл простору між елементами в контейнері.
Опції:
flex-start — елементи вирівнюються на початку контейнера.
flex-end — елементи вирівнюються в кінці контейнера.
center — елементи центруються.
space-between — перший і останній елементи розташовуються по краях, решта рівномірно між ними.
space-around — рівні відступи між елементами.
space-evenly — рівні відступи між елементами, включаючи краї контейнера.
Приклад коду:
css
.container {
display: flex;
justify-content: center;
}
Цей код центрує елементи всередині контейнера.
align-items
Ця властивість дозволяє вирівнювати елементи по поперечній осі (перпендикулярно головній осі). Залежно від значення, елементи можуть бути вирівняні по верхньому, нижньому краю або за допомогою центрування.
Значення:
stretch (за замовчуванням) — елементи розтягуються на всю висоту контейнера.
flex-start — вирівнювання по верхньому краю.
flex-end — вирівнювання по нижньому краю.
center — центрування елементів по вертикалі.
baseline — вирівнювання елементів по базовій лінії тексту.
Приклад коду:
css
.container {
display: flex;
align-items: center;
}
Цей код вирівнює елементи по центру контейнера.
flex-wrap
За замовчуванням усі flex-елементи намагаються поміститися в один рядок. Якщо елементів занадто багато, можна використовувати властивість flex-wrap, щоб дозволити їм переноситись на нові рядки.
Опції:
nowrap (за замовчуванням) — усі елементи знаходяться в одному рядку.
wrap — елементи переносяться на новий рядок при нестачі місця.
wrap-reverse — елементи переносяться, але у зворотному порядку.
Приклад коду:
css
.container {
display: flex;
flex-wrap: wrap;
}
Цей код дозволяє елементам переноситися на новий рядок, якщо для них не вистачає місця.
gap
Властивість gap задає відступи між дочірніми елементами, що дозволяє уникнути використання марґінів. Вона є дуже зручною для управління простором між елементами, особливо у складних макетах.
Опції:
row-gap — вертикальні відступи між рядками.
column-gap — горизонтальні відступи між колонками.
gap — одночасно задає вертикальні та горизонтальні відступи.
Приклад коду:
css
.container {
display: flex;
gap: 20px;
}
Цей код додає відступи між усіма елементами контейнера.
Ці властивості забезпечують максимальну гнучкість у керуванні розташуванням елементів у контейнері, дозволяючи легко налаштовувати їх орієнтацію, вирівнювання, розподіл простору та відступи.
Якщо ж говорити про відображення Flexbox у різних браузерах, то, за словами Давида, в старіших версіях Safari є проблема з визначення flex-basis, якщо не задана конкретна ширина для flex-item. В сучасних версіях браузерів різниці немає.
Властивості flex-елементів
Flex-елементи — це дочірні елементи flex-контейнера, і вони мають власні властивості, що визначають їхню поведінку всередині гнучкого контейнера. Розглянемо основні властивості, які дозволяють точніше налаштувати розмір, розташування та вирівнювання.
flex-grow
Визначає, як елемент буде розширюватися, щоб зайняти вільний простір у контейнері. Значення цієї властивості вказує, у скільки разів елемент має рости порівняно з іншими.
Приклад коду:
css
.container {
display: flex;
}
.item {
flex-grow: 1; /* Всі елементи розширюються рівномірно */
background-color: steelblue;
width: 100px;
height: 100px;
}
У цьому прикладі елементи рівномірно займають доступний простір. Якщо одному з елементів встановити flex-grow: 2;, він займатиме вдвічі більше місця, ніж інші.
flex-shrink
Керує тим, як елементи зменшуються, якщо місця в контейнері недостатньо. Значення цієї властивості вказує, наскільки елемент буде стискатися в порівнянні з іншими.
Приклад коду:
css
.item {
flex-shrink: 0; /* Елемент не буде зменшуватися */
}
У випадку нестачі місця елементи з flex-shrink: 1; будуть зменшуватися рівномірно, а елементи з більшим значенням, наприклад flex-shrink: 2;, стискаються сильніше.
«Буває, що елементи з використанням flex-grow та flex-shrink поводять себе досить неочікувано, — застерігає Давид, — тому треба певний досвід та час, щоб зрозуміти чому саме вони себе так поводять».
flex-basis
Визначає початковий розмір елемента до застосування властивостей flex-grow та flex-shrink. Це значення задається у пікселях, відсотках або може бути визначене як auto.
Приклад коду:
css
.item {
flex-basis: 200px; /* Початковий розмір елемента */
}
Цей параметр визначає початкові розміри елементів до будь-якого їхнього розширення чи зменшення.
align-self
Дозволяє перевизначити властивість align-items для окремого flex-елемента. Це дає можливість кожному елементу мати своє вирівнювання, незалежно від налаштувань контейнера.
Можливі значення:
auto — використовує значення align-items контейнера.
flex-start — вирівнювання по верхньому краю.
flex-end — вирівнювання по нижньому краю.
center — центрування елемента.
baseline — вирівнювання по базовій лінії тексту.
stretch — розтягнення елемента по висоті контейнера.
Приклад коду:
css
.item {
align-self: center; /* Центрування елемента по вертикалі */
}
Цей код встановлює центрування для конкретного елемента в межах контейнера.
Завдяки таким властивостям flex-елементів, можна досягти максимального контролю над тим, як елементи поводяться у flexbox макетах. Це дає змогу створювати адаптивні та гнучкі дизайни, що легко підлаштовуються під різні екрани та умови.
Аби уникнути «перекручування» верстки при використанні flex-grow, flex-shrink та flex-basis, Давид рекомендує наступне:
Використовуйте flex-grow: 0;, якщо елемент не повинен змінювати розмір.
Використовуйте flex-shrink: 0;, якщо елемент не повинен зменшуватися.
Використовуйте flex-basis: 0;, якщо хочете досягти рівномірного розподіл простору.
Для перевірки розмірів можна використовувати DevTools в Chrome або Firefox.
«Додам, що Flexbox може впливати негативно на продуктивність веб-сторінки, якщо динамічний розрахунок розмірів відбувається занадто часто. Тут я б рекомендував би не анімувати flex-grow або flex-shrink, а використовувати transform для кращої продуктивності. Також мінімізуйте вкладеність Flexbox-контейнерів, щоб зменшити навантаження на перерахунок макета».
Приклади реального використання
У цьому розділі ми розглянемо кілька практичних прикладів використання flexbox у реальних веб-проєктах.
Створення адаптивного макета
Одним з найбільш популярних сценаріїв використання flexbox є створення адаптивного макета, який коректно виглядатиме на різних розмірах екранів. У цьому прикладі ми побудуємо базову структуру сайту з хедером, сайдбаром, основним контентом і футером.
Приклад:
css
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header, .footer {
background: #333;
color: white;
text-align: center;
padding: 20px;
}
.main {
display: flex;
flex: 1;
}
.sidebar {
flex: 1;
background: #f4f4f4;
padding: 20px;
}
.content {
flex: 3;
background: #fff;
padding: 20px;
}
У цьому прикладі сайдбар та основний контент займають пропорційно доступний простір, а футер завжди залишатиметься закріпленим внизу сторінки.
Вертикальне та горизонтальне центрування елементів
Часто зустрічається задача — розташувати елемент по центру сторінки як горизонтально, так і вертикально. За допомогою flexbox це можна зробити дуже просто, всього за один рядок коду.
Приклад коду:
css
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
width: 200px;
height: 200px;
background: steelblue;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
Використовуючи justify-content: center та align-items: center, елемент .box ідеально вирівнюється по центру як горизонтально, так і вертикально в межах контейнера.
Сітка для карток товарів
Ще один популярний сценарій використання flexbox — створення сітки для товарів або карток із рівномірним розподілом простору між ними. Це рішення забезпечує гнучкість і адаптивність макета.
Приклад коду:
css
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.card {
width: 200px;
height: 300px;
background: #f9f9f9;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
Використання flex-wrap: wrap дозволяє карткам автоматично переноситися на новий рядок, коли не вистачає місця. З параметром gap: 20px забезпечуються рівномірні відступи між картками без потреби у використанні margin.
Інколи були випадки, коли починав робити макет за допомогою flexbox, але в процесі розумів, що це буде реалізувати занадто складно на flexbox і переписував на grid для кращого контролю над сіткою», — зазначає Давид.
Flexbox vs CSS Grid: що обрати?
Flexbox та CSS Grid — це два основні методи для побудови макетів у CSS, кожен з яких має свої переваги в залежності від типу задачі.
Основні відмінності між Flexbox та CSS Grid
У яких випадках використовувати той чи інший метод
Flexbox: обирайте для простих лінійних макетів, коли потрібно вирівнювати елементи в одному напрямку (наприклад, для адаптивних навігаційних панелей або простих форм).
CSS Grid: обирайте для складних макетів, де потрібно контролювати розташування елементів по двох осях (наприклад, для створення сіток карток товарів або складних веб-сторінок з кількома колонками та секціями).
Обидва методи можуть бути використані разом, комбінуючи їх переваги для досягнення оптимальних результатів у вашому проєкті.
Grid краще використовувати для загального розміщення блоків, а Flexbox — для вирівнювання контенту всередині цих блоків. Така комбінація дає максимальну гнучкість і адаптивність. Навіть більше, — додає експерт, — Flexbox і CSS Grid і на майбутнє залишатимуться разом. Обидва ці потужні CSS-модулі використовуються для різних завдань. Grid, ймовірно, буде виступати основним методом побудови складних сіток, а Flexbox — для роботи з елементами, що знаходяться всередині grid-елементів.
Flexbox — це потужний інструмент для створення адаптивних макетів, який забезпечує простоту в управлінні розташуванням елементів і гнучкість у їх розмірах. Його головні принципи це гнучкість, осьова орієнтація та адаптивність. Хочете швидко освоїти Flexbox? Варто почати з вивчення основних властивостей та їх застосування в простих прикладах.
Ось кілька ресурсів для практики:
Flexbox Froggy — інтерактивна гра, яка дозволяє вивчити основи Flexbox у веселій формі.
CSS-Tricks Flexbox Guide — один з найкращих ресурсів для глибокого розуміння Flexbox, що містить як теоретичні, так і практичні приклади.
MDN Web Docs — офіційна документація з усіма властивостями та прикладами для Flexbox.
«Найкращий спосіб навчитися — ефективно використовувати Flexbox через практику. Я б порадив намагатися копіювати макети або застосовувати Flexbox у рамках реальних робочих задач. Це найкращий спосіб розібратися в принципах роботи», — говорить експерт.
