Що таке Flexbox

Flexbox це скорочення від “flexible box” і є відносно новою технологією, що надає цікаві та зручні методи для побудови складних та гнучких блоків на веб-сторінці за допомогою CSS.

Головне завдання Flexbox моделі – це змусити блоки краще заповнювати доступний простір на сторінці та наділити їх додатковими властивостями для кращого керування їхніми розмірами та вирівнюванням.

Чому варто використовувати Flexbox

Модель Flexbox принесла нові додаткові можливості при верстці веб-сайтів і додатків. До появи цієї моделі для позиціонування блоків на сторінці використовувалися переважно властивості position і float. Використовуючи їх, можна згорнути будь-яку структуру, але є ситуації, коли вони не можу легко вирішити деякі завдання і ними складно досягти потрібних результатів. Наприклад, вертикальне центрування елементів усередині блоку або створення колонок однакової висоти. На даний момент, коли я розробляю сайти, я часто використовую flex елементи у своїй верстці.

Структура Flex моделі

Щоб легше зрозуміти всі терміни та властивості, що стосуються Flexbox, розглянемо наступну гіпотетичну розмітку.

Структура Flex моделі

У цьому прикладі ми маємо батьківський елемент (flex container) і три вкладені дочірні елементи (flex item). Для батьківського елемента задано властивість display: flex, цього достатньо, щоб система перетворилася на Flexbox.

Усередині батьківського блоку елементи вирівнюються та визначають свій розмір по двох осях. Уздовж головної осі (main axis) розташовуються елементи, за замовчуванням, а то й визначено властивість flex-direction, це зліва праворуч. Початок цієї осі називається main start, а кінець main end. Вісь, яка проходить перпендикулярно, головною називається поперечною (cross axis). Уздовж цієї осі вирівнюються елементи. Початок цієї осі називається cross start, а кінець cross end. За умовчанням поперечна вісь починається вгорі елемента flex container і закінчується внизу.

Змінюючи значення якості flex-direction можна змінювати напрями цих осей. Доступні наступні значення row (за замовчуванням, як у прикладі вище), row-reverse, column, column-reverse.

Детальніше про всі властивості Flexbox читайте у статті:

Посібник із CSS Flexbox.

Підтримка браузерами

На даний момент властивості Flexbox добре підтримуються всіма сучасними браузерами, якщо не брати до уваги Internet Explorer, одинадцята версія якого (IE11) все ще використовується приблизно одним відсотком користувачів. Якщо ці користувачі вам не важливі, можете сміливо використовувати будь-які властивості з сімейства Flexbox.

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





Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.