5 Flexbox методів, про які ви повинні знати

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

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

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

Flexbox не бачить в цьому проблеми. Все, що нам потрібно, так це ініціалізувати гнучку модель. Обов'язково переконайтеся, що flex-direction і align-items мають значення «за замовчуванням».

<div class="container">
<div></div>
<div></div>
<div></div>
</div>

.container{
display: flex;
flex-direction: row; /*Пункти всередині контейнера будуть розташовуватися горизонтально*/
align-items: stretch; /*Пункти всередині контейнер будуть вживати всю його висоту*/
}

Приклад

2. Зміна порядку
Деякий час назад, якщо б мені довелося динамічно змінювати порядок деяких елементів, я, ймовірно, спробував би деякі CSS хакі, але потім кинули б цю затію і в розладі зробили б це за допомогою javascript. З flexbox ж ця задача зводиться лише до застосування лише одного властивості СЅЅ.

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

<div class="container">
<div class="blue">...</div>
<div class="red">...</div>
<div class="green">...</div>
</div>

.conteiner{
display: flex;
}

/*Зворотний порядок елементів*/

.blue{
order: 3;
}

.red{
order: 2;
}

.green{
order: 1;
}

3.Горизонтальне і вертикальне центрування
Вертикальне центрування в CSS є однією з тих проблем, які змушують нас запитати себе: Як таку тривіальну річ досі так складно зробити? І це насправді так. Якщо подивитися в Google вертикальне центрування CSS, то в результаті пошуку вискочить нескінченна кількість різних методів, більшість з яких будуть включати в себе таблиці і перетворення. які призначені для виготовлення макета.

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

<div class="container">
<div>...</div>
</div>

.container{
display: flex;
/*Центр по головній осі*/
justify-content: center;
/*Центр по допоміжній осі*/
align-items: center;
}

Приклад

4. Створення повністю чуйною сітки (Responsive Grids)
Більшість розробників покладаються на готові CSS фреймворки при створенні адаптивних сайтів. Bootstrap є найбільш популярним, але є і сотні інших фреймворків, які допоможуть вам справитися з цією задачею. Як правило, вони добре працюють і мають безліч опцій, але мають тенденцію бути досить важкими. Якщо ви хочете зробити своїми руками і вам не потрібних громіздких фреймвокров, тоді Flexbox саме для вас!

Рядок flexbox сітки являє собою простий контейнер з display: border;. Всередині горизонтального стовпця може бути будь-яку кількість елементів, розмір якого встановлюється з допомогою Flex. Гнучка модель адаптується gjl розмір вікна браузера, так що ця схема має відмінно виглядати на всіх пристроях. Тим не менш, якщо все-таки не вистачить місця на екрані по горизонталі, то ми зможемо вирішити цю проблему за допомогою медіа-запиту.

<div class="container">
<!-- Ця колонка буде 25% в ширину -->
<div class="col-1">...</div>
<!-- Ця колонка буде 50% завширшки -->
<div class="col-2">...</div>
<!-- Ця колонка буде 25% в ширину -->
<div class="col-1">...</div>
</div>

.container{
display: flex;
}

.col-1{
flex: 1;
}

.col-2{
flex: 2;
}

@media (max-width: 800px){
.container{
flex-direction: column; 
}
}

5. Створення ідеального Sticky Footer (прилипає футер)
Flexbox має просте рішення цієї проблеми. Застосування display: flex; до тегу body дозволяє побудувати весь наш макет сторінки, на основі властивостей Flex. Та чого я все кажу, що так кажу? Давайте вже краще подивимося на практиці.

<body>
<div class="main">...</div>
<!-- Наш липкий футер -->
<footer>...</footer>
</body>

html{
height: 100%;
}

body{
display: flex;
flex-direction: column;
height: 100%;
}

.main{
/*Основний розділ буде займати все вільне місце на сторінці*/
flex: 1 0 auto;
}

footer{
/*Футер буде займати стільки місця по вертикалі, скільки і повинен і не пікселя більше */
flex: 0 0 auto;
}

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

Сподіваюся, що мої поради CSS були для вас корисні і що вони допоможуть вам створювати більш якісні і адаптивні макети.

Чекаю ваших коментарів з цього приводу.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.