5 flexbox технік при створенні сайту, Проверстка

Flexbox – це стандарт CSS, оптимізований для проектування інтерфейсів користувача. Використовуючи різні flexbox властивості, можна створити сторінку з блоків, які легко позиціонувати і змінювати будь-яким способом. Сайти та програми, створені таким чином, добре адаптуються до всіх розмірів екрану. У цій статті ми розглянемо п'ять flexbox підходів для вирішення проблем компонування сторінки. У статті показані практичні приклади для демонстрації сценаріїв з реальних сторінок html, в яких ці методи застосовуються.

1. Створення колонок рівної висоти

Спочатку це може здатися легким завданням, але зробити стовпці, які мають рівну висоту, приносить чимало труднощів і процес реалізації часом дуже дратує. Звичайне встановлення властивості min-height не буде працювати, тому що тільки кількість контенту в одній з колонок почне змінюватися, деякі з колонок будуть збільшуватися, а інші залишаться коротшими.

Виправлення цієї проблеми за допомогою flexbox вирішує цю проблему, тому що колонки створені таким чином, мають рівні висоти за замовчуванням. Все, що нам потрібно зробити, це ініціалізувати flex модель, потім задати значення властивостям flex-direction та align-items.

Щоб переглянути демо-версію цієї техніки, ви можете прочитати статтю «Easiest Way To Create Equal Height Sidebars», в якій створено сторінку з бічною панеллю та основною частиною контенту.

2. Сортування елементів

Властивість order дозволяє нам змінювати послідовність flex елементів, у якій вони з'являються на екрані. Цей параметр є цілим числом, що визначає положення елемента – нижчі числа означають більший пріоритет.

3. Горизонтальне та вертикальневирівнювання

Вертикальне вирівнювання в CSS - це одна з тих проблем, яку досі складно зробити. Якщо задати запит у Google про вертикальне вирівнювання, то відповіддю будемо нескінченна кількість посилань на різні методи, більшість яких ґрунтується на таблицях (table) та трансформаціях (transform) – властивості, які не призначені для створення макетів.

Flexbox пропонує просте вирішення цієї проблеми. Кожен flex layout має 2 напрямки (X-вісь та Y-вісь) і дві властивості для вирівнювання по кожній з цих осей. І при центруванні ми можемо позиціонувати будь-який елемент у середині батьківського контейнера.

Переглянути цю технологію можна на цій сторінці.

4. Створення чуйної сітки

Більшість розробників покладаються на CSS фреймворки під час створення адаптивних сіток. Bootstrap є найбільш популярним, але є сотні бібліотек, які можуть допомогти вам із цим завданням. Як правило, вони працюють добре і мають багато опцій, але мають тенденцію бути досить важким. Якщо ви не бажаєте продати все в рамках сітки, то flexbox для Вас!

Цю техніку докладно розписано на сторінці The Easiest Way To Make Responsive Headers.

5. Створення футера прибитого донизу сторінки

Flexbox має просте вирішення цієї проблеми. Сторінку, в якій треба, щоб футер завжди був прибитий до низу сторінки, можна робити на flex елементах і ми можемо бути впевнені, що наш футер завжди буде залишатися в нижній частині сторінки.