Основні концепції Флексбоксу

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

Коли флексбокс описують як одновимірну систему, то мають на увазі, що він виконує розкладку в одному вимірі за раз – або в ряду, або в колонці. Це контрастує із двовимірною моделлю сіткової розкладки CSS, котра керує колонками та рядами водночас.

Дві осі флексбокса

При роботі із флексбоксом необхідно мислити поняттями двох осей: головної та поперечної. Головна вісь визначена властивістю flex-direction, а поперечна вісь – перпендикулярна до неї. Все, що виконується за допомогою флексбокса, використовує ці осі, тож варто розуміти їх суть з самого початку.

Головна вісь

Головна вісь визначається властивістю flex-direction, котра має чотири можливі значення:

• row
• row-reverse
• column
• column-reverse

Якщо обрати row або row-reverse, то головна вісь буде напрямлена горизонтально у рядковому напрямку.

Якщо обрати column або column-reverse, то головна вісь буде напрямлена вертикально – у блоковому напрямку.

Поперечна вісь

Поперечна вісь напрямлена перпендикулярно до головної, тож якщо flex-direction (головна вісь) має значення row або row-reverse, то поперечна вісь напрямлена вертикально.

Якщо головна вісь – column або column-reverse, то поперечна вісь напрямлена горизонтально.

Початкова та кінцева лінії

Іще одна життєво важлива для розуміння тема – те, як флексбокс не робить припущень щодо режиму письма документа. У минулому CSS сильно схилялась в бік горизонтальних режимів письма з написанням тексту зліва направо. Сучасні способи розкладки охоплюють низку режимів письма, і більше не робиться припущень про те, що рядок тексту почнеться у лівому верхньому куті документа і прямуватиме в бік правої руки, а наступні рядки з'являться знизу, один за одним.

Можна дізнатись більше про взаємини між флексбоксом та специфікацією Режимів письма у пізнішій статті; втім, подальший опис повинен допомогти усвідомити, чому мова не йде про ліве та праве, про верх та низ, коли описуються напрями плину гнучких елементів.

Якщо значення flex-direction – row, а мова – українська, то початковий край головної осі буде зліва, а кінцевий край – справа.

Якщо мова – арабська, то початковий край головної осі – справа, а кінцевий край – зліва.

В обох випадках початковий край поперечної осі – згори гнучкого контейнера, а кінцевий – внизу, оскільки обидві мови мають горизонтальний режим письма.

З часом мислення категоріями початку та кінця замість ліва та права стає звичним, а це буде корисним при роботі з іншими способами розкладки, наприклад, із сітковою розкладкою CSS, котра має такі ж принципи.

Гнучкий контейнер

Область документа, скомпонована за допомогою флексбокса, називається гнучким контейнером. Щоб створити гнучкий контейнер, слід вказати для контейнера області властивість display зі значенням flex. Коли це зроблено, то безпосередні нащадки такого контейнера стають гнучкими елементами. Контролювати, чи відображається сам контейнер в контексті рядка, або ж в контексті блокового контексту форматування, можна за допомогою значень inline flex або inline-flex для рядкових гнучких контейнерів, і block flex або flex для гнучких контейнерів блокового рівня.

Як і в випадку всіх інших властивостей CSS, існують певні визначені початкові значення, тож вміст нового гнучкого контейнера поводитиметься так:

• Елементи виводяться в ряду (властивість flex-direction має усталене значення row).
• Елементи починаються з початкового краю головної осі.
• Елементи не розтягуються за головним виміром, але можуть скорочуватися.
• Елементи розтягуються, аби заповнити доступний простір за поперечною віссю.
• Властивість flex-basis має значення auto. Це означає, що в кожному випадку вона буде рівною значенню width гнучкого елемента при горизонтальному письмі, або значенню height – при вертикальному письмі. Якщо відповідне значення width чи height також має значення auto, то використовується значення flex-basis вмісту елемента.
• Властивість flex-wrap має значення nowrap. Це означає, що гнучкі елементи завжди залишаються в одному ряду або стовпчику, переповнюючи свій контейнер, якщо їх сумарна ширина чи висота перевищує, відповідно, ширину чи висоту їх контейнера.

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

У живому прикладі нижче видно, як це працює. Спробуйте редагувати елементи або додати елементи, щоб перевірити усталену поведінку флексбокса.

Зміна flex-direction

Властивість гнучкого контейнера flex-direction дає змогу змінити напрям виводу гнучких елементів. Встановлення flex-direction: row-reverse змусить елементи надалі виводитись в ряд, але змінить місцями початок та кінець ряду.

Якщо змінити значення flex-direction на column, то головна вісь перемкнеться, і елементи будуть виведені у стовпчик. Якщо задати column-reverse, то початок та кінець знову поміняються місцями.

У живому прикладі нижче flex-direction має значення row-reverse. Спробуйте інші значення: row, column і column-reverse, – і погляньте, що станеться із вмістом.

Багаторядні гнучкі контейнери із flex-wrap

Хоч флексбокс і є одновимірною моделлю, можна змусити гнучкі елементи переходити на кілька рядів. При цьому слід розглядати кожен ряд як новий гнучкий контейнер. Будь-який розподіл простору діятиме для такого ряду окремо, без зв'язку з іншими рядами з будь-якого боку.

Щоб ввімкнути переведення рядів, слід додати властивість flex-wrap зі значенням wrap. Після цього, якщо елементи завеликі, аби бути виведеними в одному ряду, вони будуть перенесені на наступний. Живий приклад нижче містить елементи зі заданою шириною, і сумарна ширина елементів завелика для гнучкого контейнера. Оскільки властивість flex-wrap має значення wrap, то елементи переходять на новий ряд. Якщо встановити значення nowrap, котре, до речі, є початковим, то елементи скоротяться, щоб вміститись у контейнері, тому що вони мають початкові значення флексбокса, що дає елементам змогу скорочуватись. Використання nowrap призвело б до переповнення, якби елементи не могли скорочуватись, або якби не могли скоротитись настільки, щоб поміститися.

Довідайтесь більше про перенесення гнучких елементів на новий ряд у настановах Опанування переведення гнучких елементів на новий ряд.

Скорочення flex-flow

Можна поєднати властивості flex-direction та flex-wrap у скороченні flex-flow. Перше значення – flex-direction, а друге – flex-wrap.

У живому прикладі нижче спробуйте змінити перше значення на одне з дозволених значень flex-direction - row, row-reverse, column чи column-reverse, а також змінити друге на wrap чи nowrap.

Властивості, що застосовуються до гнучких елементів

Для більшого контролю над гнучкими елементами можна націлюватись на них напряму. Це можливо за допомогою трьох властивостей:

• flex-grow
• flex-shrink
• flex-basis

У цьому огляді буде короткий позір на ці властивості, а повніше розуміння можна набути з настанов Керування співвідношеннями гнучких елементів за головною віссю.

Перед усвідомленням цих властивостей слід взяти до уваги концепцію доступного простору. При зміні значень цих гнучких властивостей – змінюється спосіб розподілу доступного простору між елементами. Ця концепція також важлива при шикуванні елементів.

Якщо є три 100-піксельні елементи у контейнері, що має ширину 500 пікселів, то простір, необхідний для розкладання елементів, – 300 пікселів. Це залишає 200 пікселів доступного простору. Якщо не змінити початкові значення, то флексбокс залишить цей простір вільним за останнім елементом.

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

Властивість flex-basis

flex-basis – те, що визначає розмір елемента щодо простору, який він залишає як доступний. Початкове значення цієї властивості – auto, – в такому випадку браузер перевіряє, чи мають елементи розмір. У прикладі вище усі елементи мають ширину 100 пікселів, і це значення використовується як flex-basis.

Якщо елементи не мають ширини, то flex-basis отримує значення розміру вмісту. Саме тому коли на предку просто оголошено display: flex для створення гнучких елементів, то елементи стають в ряд і займають лише той простір, котрий потрібен їм для виводу свого вмісту.

Властивість flex-grow

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

Якби усі елементи у прикладі вище мали flex-grow зі значенням 1, то доступний у гнучкому контейнері простір порівну був би розподілений між елементами, і вони розтягнулись би для заповнення контейнера за головною віссю.

Властивість flex-grow може бути використана для пропорційного розподілу простору. Якщо задати першому елементові flex-grow значення 2, а всім решті – 1, то дві частки будуть виділені першому елементові (у прикладі – 250 пікселів із 500), і по одній – решті двом елементам (кожному по 125 пікселів із 500).

Властивість flex-shrink

Коли властивість flex-grow займається додаванням простору за головною віссю, властивість flex-shrink керує її відбором. Якщо в контейнері немає достатнього простору для розкладання елементів, і flex-shrink має значення додатного цілого числа, то елемент стає меншим за flex-basis. Як і з flex-grow, різні значення можуть бути присвоєні, щоб один елемент скорочувався швидше за інших: елемент із більшим значенням flex-shrink скорочуватиметься швидше за братерні елементи із меншими значеннями.

Мінімальний розмір елемента береться до уваги при роботі з дієвим розміром скорочення, тобто flex-shrink потенційно може здаватись менш послідовним у поведінці за flex-grow. Для більш детального розгляду того, як цей алгоритм працює, дивіться статтю Керування співвідношеннями гнучких елементів за головною віссю.

Примітка: Ці значення: flex-grow та flex-shrink – пропорції. Зазвичай якби усі елементи мали flex: 1 1 200px, а тоді хотіли, щоб один елемент зростав з подвійною швидкістю, то задали б йому flex: 2 1 200px. Втім, також за бажання можна було б використати flex: 10 1 200px чи flex: 20 1 200px.

Скорочені значення гнучких властивостей

Рідко можна побачити використання окремо властивостей flex-grow, flex-shrink і flex-basis; натомість їх поєднують у скорочення flex. Скорочення flex дає змогу встановити три значення у такому порядку: flex-grow, flex-shrink, flex-basis.

Живий приклад нижче дає змогу спробувати різні значення скорочення flex; пам'ятайте, що перше значення – flex-grow. Коли це значення – додатне, то це означає, що елемент може зростати. Друге значення – flex-shrink: із додатним значенням тут елементи можуть скорочуватись, втім, це може відбутись лише за умови, що сума розмірів елементів за головною віссю утворює переповнення. Останнє значення – flex-basis; це значення, котре елементи використовують як свій базовий розмір, від котрого відбувається зростання та скорочення.

Також є наперед визначені значення скорочення, що покривають більшість випадків. Їх часто можна побачити у настановах, і в багатьох випадках достатньо буде їх. Наперед визначені значення – наступні:

• flex: initial
• flex: auto
• flex: none
• flex: <positive-number>

Встановлення flex: initial скидає елемент до початкових значень флексбоксу. Це еквівалентно до flex: 0 1 auto. В такому випадку значення flex-grow – 0, тож елементи не зростатимуть понад flex-basis. Значення flex-shrink – 1, тож елементи можуть скоротитись, якщо потрібно, замість переповнення контейнера. Значення flex-basis – auto. Елементи або використають розмір, встановлений для елемента у вимірі головної осі, або отримають розмір на основі вмісту.

Використання flex: auto еквівалентно до flex: 1 1 auto; тоді все так само як з flex:initial, але в такому випадку елементи можуть зростати й заповнювати контейнер, як і скоротитись, якщо потрібно.

Використання flex: none створить цілком негнучкі елементи гнучкого контейнера. Це еквівалентно до flex: 0 0 auto. Елементи не можуть зростати або скорочуватись, але будуть розкладені за допомогою флексбоксу зі значенням flex-basis – auto.

Скорочений запис, котрий часто можна побачити у настановах: flex: 1, flex: 2, і так далі. Це те саме, що flex: 1 1 0 або, відповідно, flex: 2 1 0. Елементи можуть зростати та скорочуватись, маючи flex-basis зі значенням 0.

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

Шикування, вирівнювання та розподіл вільного простору між елементами

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

align-items

Властивість align-items шикує елементи на поперечній осі.

Початкове значення цієї властивості – stretch, і саме тому гнучкі елементи усталено розтягуються до висоти гнучкого контейнера. Така висота може бути продиктована висотою найвищого елемента у контейнері або розміром, встановленим на самому контейнері.

Натомість можна було б встановити значення align-items у flex-start, аби змусити елементи стати в початок гнучкого контейнера, у flex-end, аби вишикувати їх до кінця, або center – щоб вишикувати у центрі. Спробуйте це у живому прикладі: гнучкий контейнер має задану висоту, можна спробувати різні значення align-items, аби побачити, як елементи рухатимуться контейнером.

• stretch
• flex-start
• flex-end
• center

justify-content

Властивість justify-content використовується для шикування елементів на головній осі, напрям якої встановлений властивістю flex-direction. Початкове значення – flex-start, що змушує елементи стати в початок контейнера, але можна також встановити значення flex-end, аби виставити їх у кінці, або center, щоб виставити у центрі.

Також можна використати значення space-between, аби захопити увесь незайнятий після розкладання елементів простір, і поділити його порівну між елементами так, щоб між кожними двома суміжними елементами був однаковий проміжок. Щоб зліва та справа від кожного елемента був однаковий простір, потрібно встановити значення space-around. З space-around же елементи отримують по половинці простору з обох боків. Іще можна змусити елементи мати однаковий простір навколо себе за допомогою значення space-evenly. З space-evenly елементи мають цілий однаковий простір з обох кінців.

Спробуйте наступні значення justify-content у живому прикладі:

• flex-start
• flex-end
• center
• space-around
• space-between
• space-evenly

У статті Шикування елементів у гнучкому контейнері ці властивості досліджуються із більшим заглибленням, аби отримати краще розуміння їх роботи. Втім, у більшості випадків будуть корисними й наведені вище прості приклади.

justify-items

Властивість justify-items ігнорується при компонуванні гнучкого блока.

Наступні кроки

Після прочитання цієї статті має сформуватись розуміння основних можливостей флексбоксу. У наступній статті розглядається те, як ця специфікація пов'язана з іншими частинами CSS.