Модуль Flexbox. Урок 1

16

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

Модуль Flexbox. Урок 1

Автор: Андрій Кудлай

Звуть мене Андрій Кудлай. Родом я з України, живу в Дніпропетровську. Веб-програмування вчився сам. Непогано знаю HTML, CSS, PHP, JavaScript.

Модуль Flexbox. Урок 1Модуль Flexbox. Урок 1

Отже, перш за все, термін Flexbox – це поєднання двох слів: flexible box — «гнучкий блок». І це дійсно гнучкий блок, оскільки управління ним набагато гнучкіша, на відміну від стандартного блоку. Щоб оцінити можливості Flexbox’a, досить спробувати вирішити з його допомогою класичну задачу щодо створення колонок однакової висоти, але з різним вмістом. Засобами Flexbox ця задача вирішується буквально використанням одного-двох властивостей модуля Flexbox.

При вивченні модуля Flexbox ми будемо використовувати статтю Повне керівництво по Flexbox, яка є певним мануалом за властивостями модуля.

Для початку познайомимося з двома необхідними поняттями: Flex-контейнер і Flex-елемент. Flex-контейнер – це батьківський блок, який ми наділяємо властивістю гнучкості (flex). Ну а Flex-елемент – це дочірній елемент Flex-контейнера. Відповідно, частина власти модуля Flex застосовна до контейнера, а частина – до елементів всередині нього.

Також нам необхідно ознайомитися з наступною схемою, що дозволяє зрозуміти ідею роботи з Flex:

Модуль Flexbox. Урок 1

На цій схемі ми бачимо 2 осі: вісь X і вісь Y. За замовчуванням вісь X є головною віссю, а вісь Y – поперечної. Уздовж цих осей і відбувається вибудовування елементів, а також управління ними. Також ми можемо змінити порядок осей, зробивши вісь Y головною, а вісь X – поперечної. Вибудовування елементів відбувається у звичному нам порядку: зліва направо і зверху вниз. При цьому ми також можемо змінювати цей порядок. До речі, як говорилося вище, Flexbox враховує мовну локаль і змінить порядок при необхідності самостійно.

Тепер давайте приступимо до практики. Створимо простеньку розмітку:

Flexbox

Block 1

І додамо кілька стильових правил:

.wrap{
border: 1px solid #000;
}
.block{
background: #26a082;
color: #fff;
font-size: 20px;
border: 1px solid #ccc;
}

Зараз даний блок (з класом block) веде себе, як звичайний блок: займає всю ширину і необхідну для його вмісту висоту. Тепер спробуємо зробити його Flex-елементом. Для цього нам необхідно спочатку організувати Flex-контейнер, яким буде виступати обгортка (блок з класом wrap). Додамо необхідне правило до даного блоку:

.wrap{
border: 1px solid #000;
display: flex;
}

Властивість display зі значенням flex дозволяє призначити Flex-контейнер. В результаті цієї дії наш блок (з класом block) став займати тільки необхідну йому ширину і всю доступну висоту батьків (Flex-контейнера). Оскільки блок розтягується по висоті, гадаю, ви вже побачили плюси використання модуля Flex, — ми вже можемо без проблем організувати колонки однакової висоти, використавши при цьому лише одну властивість. Давайте спробуємо додати ще кілька колонок у верстку, щоб переконатися в цьому:

Block 1
Block 2
Block 3

Всі колонки розтягнулися по висоті батьків. Додамо ще кілька стильових правил, щоб створити якусь подобу трехколоночного макету сайту:

*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
.wrap{
/*border: 1px solid #000;*/
display: flex;
height: 100%;
}
.block{
background: #26a082;
color: #fff;
font-size: 20px;
border: 1px solid #ccc;
}

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

flex-grow — визначає для flex-елемента можливість «виростати» при необхідності (значення за замовчуванням — 0). Є чимось на зразок пропорції, що дозволяє задавати частку ширини елемента по відношенню до інших елементів (можливість займати більшу частку вільного простору);

flex-shrink — визначає для flex-елемента можливість стискатися при необхідності (значення за умовчанням — 1);

flex-basis — визначає розмір за замовчуванням для елемента (значення за замовчуванням — auto).

Для зазначених трьох властивостей є скорочена запис зі значеннями за замовчуванням: flex: none | [ ? || ]

Для заповнення вільного простору нам необхідно, щоб блоки зросли, тобто необхідно властивість flex-grow або перше значення властивості flex, що визначає скорочений запис. Давайте використаємо властивість для Flex-елементів (клас block):

.block{
background: #26a082;
color: #fff;
font-size: 20px;
border: 1px solid #ccc;
flex: 1;
}

Тепер блоки зайняли не тільки всю доступну висоту, але і всю доступну ширину. При цьому ширина кожного блоку однакова. Оскільки ми задалися метою організувати якусь подобу трехколоночного макета, давайте збільшимо ширину центрального блоку (block2). Для цього збільшимо для нього значення flex-grow:

.block2{
flex: 5;
}

В результаті ми отримали необхідний результат, центральний блок в 5 разів більше бічних.

На цьому поточний урок завершено. У наступному уроці ми продовжимо вивчення модуля Flexbox. Удачі і до нових зустрічей!