Вебсторінки постійно розвиваються та ускладнюються, збільшується кількість контенту, і всі елементи потрібно якось структурувати, визначати та розміщувати відносно один одного. Чим складніша структура, тим більше мороки з позиціонуванням. Саме тому з’явилися специфікації, які дозволяють легко вирішити ці завдання. Один із таких модулів ми й розглянемо.
Flexbox — це специфікація CSS, яка дозволяє вирішувати широкий спектр задач у верстці. З Флексбоксом можна зручно й легко розподіляти вільний простір між елементами, вирівнювати їх у різних напрямках, задавати розміри об’єктів та багато іншого.
Це один із найкращих інструментів для розподілу й структурування елементів на сторінці. Особливо актуальний він в адаптивній верстці, коли на різних екранах розташування об’єктів змінюється. Flexbox дозволяє створити ідеальну структуру, яка легко сприймається й залишається гнучкою. Такий підхід незамінний для сторінок з елементами без чітко заданих розмірів або при створенні плаваючих сіток.
Всі кнопки, блоки, іконки й поля легко переміщуються без спеціальних обчислень. Flexbox також добре підходить у випадках, коли дизайн передбачає поступове додавання нових елементів.
Тим, хто ще не знайомий з тонкощами верстки, варто почати з захопливого майстер-класу засновника школи WAYUP Андрія Гаврилова «Основи HTML і CSS + верстка лендінгу».
Переваги Flexbox
Ідея створення прототипу Flexbox з’явилася ще у 2008 році, тоді CSS Working Group зацікавилася можливістю, і вже за рік був опублікований чорновик. Safari та Chrome швидко додали часткову підтримку, а згодом і Opera. У 2012 специфікація була значно оновлена, і сьогодні всі основні браузери підтримують цей модуль.
Слово “flex” у назві неспроста — блоки стають «гнучкими», елементи можна розтягувати та стискати як завгодно. Цікава особливість — Flexbox адаптований для мов із написанням справа наліво. Ще одна характерна риса — наявність рядів у поперечному напрямку. Це дозволяє вирівнювати не лише окремі об’єкти, а й цілі ряди.
Приклад сторінки, створеної з використанням Flexbox:
.jpg)
Специфікацію Flexbox рекомендується використовувати беззастережно — питання лише в тонкощах і доречності її застосування. Часто вона використовується разом із Grid. У яких випадках варто застосовувати той чи інший підхід, ви можете дізнатися в нашому огляді.
Основи використання
Логічна та проста верстка дозволяє без зусиль задавати й змінювати параметри об’єктів у Flex-контейнері: розподіл простору, вирівнювання, порядок розташування тощо.
Головна вісь задається властивістю flex-direction, вона має фіксовані розміри й межі, але дозволяє змінювати напрям розподілу блоків шляхом зміни осей. Поперечна вісь розташована перпендикулярно головній.
За замовчуванням головна вісь — горизонтальна з напрямком справа наліво, а поперечна — вертикальна з напрямком згори вниз. Але ці параметри можна змінити або навіть поміняти осі місцями.
.jpg)
Щоб зробити звичайний блок флекс-елементом, потрібно створити флекс-контейнер за допомогою властивості display і помістити в нього елемент. Після цього блок почне підпорядковуватись правилам контейнера — можна вказати ширину колонки й додати ще кілька: усі вони будуть розтягуватися за бажанням користувача. Без додаткових вказівок елементи займають простір рівномірно, але з допомогою властивостей можна задати розміри.
Властивості Flexbox:
Це лише кілька базових властивостей. Насправді їх набагато більше, але всі вони зрозумілі й логічні, тож труднощів із використанням не буде.
Щоб усі елементи рівномірно розтягувалися та займали вільний простір, задається flex-grow:1. Щоб один блок був більшим за інші, потрібно скоригувати співвідношення. Наприклад, щоб зробити один елемент удвічі більшим — всім дати flex-grow:1, а цьому — flex-grow:2. Пропорції працюють за принципом кратності: однаковий вигляд матимуть варіанти 1:1:2 і 3:3:6. Не обов’язково використовувати лише цілі числа — можна точно налаштувати співвідношення з допомогою дробових значень.
Висновок
Популярність цієї моделі верстки обумовлена багатьма факторами: зручність створення каркасів і окремих елементів HTML-сторінки, широкі можливості для роботи з розміткою, простота у використанні.
Якщо узагальнити, Flexbox — це чудове рішення для тих задач, які в інших системах складні або незручні. Наприклад, розташування кількох блоків в один ряд із рівномірним розподілом, прилипання футера до низу тощо. Так, це можна зробити і без Flexbox, але з ним — зручніше, ефективніше й швидше, якщо правильно застосовувати інструменти. Опанувати основи верстки можна на курсі Веб-верстальник: Код Фрилансера, де за три місяці інтенсивного та цікавого навчання ви отримаєте сучасну затребувану професію або підвищите кваліфікацію, розібравшись в актуальних трендах і підходах.
Специфікація Flexbox дозволяє створювати базові макети, але поки що рано стверджувати, що вона краща за інші звичні методи. А от для верстки окремих частин сторінки чи веб-компонентів Flexbox ідеальний. Зараз модуль досить популярний, попит на нього зростає, тож він має всі шанси стати ключовим інструментом у веброзробці завдяки своїй простоті та універсальності — хоч і навряд чи повністю витіснить класичні методи верстки.