Верстка за допомогою CSS Flexbox

09.03.21 ⏰5 хв

Верстка — заняття приємне і цікаве, коли під руками є прогресивні інструменти, які її спрощують. Flexbox — це певного роду конструктор, яким можна скласти сторінку блоками у той вигляд, який Вам потрібно досягти.

Навіщо придумали CSS Flexbox?

Ця технологія призначена для створення гнучких макетів. За допомогою Flexbox можна дуже просто і гнучко розставити елементи в контейнері, розподілити обсяг пам'яті, доступний між ними, і вирівняти їх тим чи іншим способом, навіть якщо вони не мають конкретних розмірів.

CSS Flexbox дозволяє створити адаптивний дизайн набагато простіше, ніж з використанням Float та позиціювання.

Flexbox можна використовувати як для CSS розмітки цілої сторінки, так і її окремих блоків.

Чи підтримується CSS Flexbox браузерами?

CSS Flexbox підтримується всіма сучасними браузерами (з використанням префіксів: IE10 +, Edge12 +, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1 +, Blackberry 7 +).

Основи CSS Flexbox

Щоб створити CSS розмітку за допомогою Flexbox, потрібно задати необхідному HTML елементу CSS-властивість display зі значенням flex або flex-inline.

Після цього даний елемент стає flex-контейнером, а всі його безпосередні дочірні елементи — flex-елементами. Коли ми говоримо про flexbox, то маємо на увазі під цим тільки елемент з display: flex або display: flex-inline і всі елементи безпосередньо розташовані в ньому. Таким чином в CSS Flexbox є всього два типи елементів: flex-контейнер і flex-елемент.

Властивості flex-контейнера

flex-direction

Задає напрямок головної осі. Можливі значення:

row — зліва направо (за замовчуванням);
row-reverse — справа наліво;
column — зверху вниз;
column-reverse — знизу вверх.

flex-wrap

Визначає багаторядковість контейнера. Можливі значення:

nowrap — flex-елементи шикуються в один рядок, якщо не поміщаються в контейнер, то виходять за його межі (за замовчуванням);
wrap — flex-елементи шикуються в декілька рядків, якщо не поміщаються в один;
wrap-reverse — схожий на wrap, але перенесення відбувається знизу вгору.

flex-flow

Визначає одразу два параметри: flex-direction і flex-wrap.
Наприклад, flex-flow: column wrap;

justify-content

Визначає як будуть вирівняні елементи по головній осі. Можливі значення:

flex-start — flex-елементи притискаються до початку головної осі (за замовчуванням);
flex-end — flex-елементи притискаються до кінця головної осі;
center — flex-елементи вирівнюються по центру головної осі;
space-between — flex-елементи розподіляються уздовж головної осі, при цьому перший елемент притиснутий до початку осі, а останній — до кінця;
space-around — flex-елементи розподіляються уздовж головної осі, при цьому вільний простір ділиться порівну між елементами. Але варто зазначити, що проміжки підсумовуються і відстань між елементами буде у два рази більша, ніж відстань між краями контейнера і крайніми елементами.

align-items

Вирівнює елементи по поперечній осі. Можливі значення:

flex-start — flex-елементи притискаються до початку поперечної осі (за замовчуванням);
flex-end — flex-елементи притискаються до кінця поперечної осі;
center — flex-елементи вирівнюються по центру поперечної осі;
baseline — flex-елементи вирівнюються по своїй базовій лінії.
stretch — flex-елементи розтягуються, займаючи все доступне місце по поперечній осі. Але якщо для елементів задана висота, то stretch буде проігнорований.

align-content

Вирівнює цілі рядки flex-елементів по поперечній осі. Можливі значення:

flex-start — рядки flex-елементів притискаються до початку поперечної осі (за замовчуванням);
flex-end — рядки flex-елементів притискаються до кінця поперечної осі;
center — рядки flex-елементів вирівнюються по центру поперечної осі;
space-between — рядки flex-елементів розподіляються вздовж поперечної осі, при цьому перший рядок притиснутий до початку осі, а останній — до кінця;
space-around — рядки flex-елементів розподіляються вздовж поперечної осі, при цьому вільний простір ділиться порівну між рядками. Але варто зазначити, що проміжки підсумовуються і відстань між рядками у два рази більша, ніж відстань між краями контейнера і крайніми рядками.
stretch — рядки flex-елементів розтягуються, займаючи все доступне місце по поперечній осі. Але якщо для елементів задана висота, то stretch буде проігнорований.

Цю статтю можна використовувати як шпаргалку, а от на практиці спробуйте поробити вправи на платформі w3school, там все коротко описано, але є класні приклади і можливість спробувати самому.

Коли проробите вправи там, можете закріпити знання за допомогою гри Flexbox Froggy, там все ще й українською мовою. В такий спосіб дуже легко засвоюється матеріал.

Успіху!