1. Властивості flex-контейнера
2. Властивості flex-елементів
3. Особливості застосування Flexbox на практиці
4. 2. Стиснення блоків з довгими словами
5. 3. Гарантована ширина
6. 4. Кілька корисних зауважень
7. 5. В якості висновку ...

Специфікація Flexbox (Flexible Box Layout Module) - це метод позиціонування елементів в горизонтальному або вертикальному напрямках.

Flexbox об'єднує в собі набір властивостей для батьківського flex-контейнера і для дочірніх flex-елементів.

Щоб елемент став flex-контейнером, йому треба привласнити display: flex; або display: inline-flex; (Блоковий або рядковий відповідно).

Усередині flex-контейнера створюються дві осі: головна і перпендикулярна їй поперечна. Спочатку flex-елементи шикуються по головній осі, а потім вже по поперечної.

Властивості flex-контейнера

Визначає напрямок головної осі. Можливі значення:

• row - зліва направо (за замовчуванням);
• row-reverse - справа наліво;
• column - зверху вниз;
• column-reverse - від низу до верху.

Визначає багаторядкова контейнера. Можливі значення:

• nowrap - flex-елементи шикуються в один рядок, якщо не поміщаються в контейнер, то виходять за його межі (за замовчуванням);
• wrap - flex-елементи шикуються в кілька рядків, якщо не поміщаються в одну;
• wrap-reverse - схоже на wrap, але перенесення відбувається знизу вгору.

Визначає відразу два параметри: flex-direction і flex-wrap.
Наприклад, flex-flow: column wrap; justify-content Визначає вирівнювання елементів по головній осі. Можливі значення:

• flex-start - flex-елементи притискаються до початку головної осі (за замовчуванням);
• flex-end - flex-елементи притискаються до кінця головної осі;
• center - flex-елементи вирівнюються по центру головної осі;
• space-between - flex-елементи розподіляються уздовж головної осі, при цьому перший елемент притиснутий до початку осі, а останній - до кінця;
• space-around - flex-елементи розподіляються уздовж головної осі, при цьому вільний простір ділиться порівну між елементами. Але варто зазначити, що проміжки підсумовуються і відстань між елементами в два рази більше, ніж відстань між краями контейнера і крайніми елементами.

приклад

align-items

Визначає вирівнювання елементів по поперечної осі. Можливі значення:

• flex-start - flex-елементи притискаються до початку поперечної осі (за замовчуванням);
• flex-end - flex-елементи притискаються до кінця поперечної осі;
• center - flex-елементи вирівнюються по центру поперечної осі;
• baseline - flex-елементи вирівнюються по своїй базової лінії. Базова лінія - це уявна лінія, що проходить по нижньому краю символів без урахування звисанням, таких як у букв «д», «р», «ц», «щ»;
• stretch - flex-елементи розтягуються, займаючи все доступне місце по поперечної осі. Але якщо для елементів задана висота, то stretch буде проігнорований.

Визначає вирівнювання цілих рядків flex-елементів по поперечної осі. Можливі значення:

• flex-start - рядки flex-елементів притискаються до початку поперечної осі (за замовчуванням);
• flex-end - рядки flex-елементів притискаються до кінця поперечної осі;
• center - fстрокі flex-елементів вирівнюються по центру поперечної осі;
• space-between - рядки flex-елементів розподіляються вздовж поперечної осі, при цьому перший рядок притиснута до початку осі, а остання - до кінця;
• space-around - рядки flex-елементів розподіляються вздовж поперечної осі, при цьому вільний простір ділиться порівну між рядками. Але варто зазначити, що проміжки підсумовуються і відстань між рядками в два рази більше, ніж відстань між краями контейнера і крайніми рядками.
• stretch - рядки flex-елементів розтягуються, займаючи все доступне місце по поперечної осі. Але якщо для елементів задана висота, то stretch буде проігнорований.

приклад

Це властивість не працює для однострочного flex-контейнера.

Властивості flex-елементів

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

приклад

Визначає базовий розмір flex-елемента перед розподілом простору в контейнері. Може бути заданий в px,%, em і інших одиницях виміру. По суті це свого роду відправна точка, відносно якої відбувається розтягування або стиснення елемента. Значення за замовчуванням - auto, при цьому розмір елемента залежить від розміру внутрішнього контенту.

У специфікації CSS Flexible Box Layout Module Level 1 приведена наочна діаграма для трьох flex-елементів зі значеннями flex-grow 1, 1, 2 відповідно:

Приклад flex-basis: 0

Приклад flex-basis: auto

Визначає, яку частку вільного місця всередині контейнера додасть до свого базового розміру flex-елемент. Здається цілим числом, службовцям пропорцією. За замовчуванням дорівнює 0. Якщо у всіх елементів flex-grow: 1, то всі вони будуть однакового розміру. Якщо одному flex-елементу задати значення 2, то до його базового розміру додасться в два рази більше, ніж до інших.

приклад

Визначає, на скільки в разі нестачі місця буде зменшуватися flex-елемент щодо зменшення сусідніх елементів всередині flex-контейнера. Здається цілим числом, службовцям пропорцією. За замовчуванням дорівнює 1. Якщо одному flex-елементу задати значення flex-shrink: 2, то з його базового розміру відніметься в два рази більше, ніж з інших, якщо контейнер менше, ніж сума базових розмірів входять до нього елементів.

приклад

Визначає відразу три параметра: flex-grow, flex-shrink, flex-basis.
Наприклад, flex: 1 + 1 200px; align-self Перевизначає вирівнювання, заданий за замовчуванням або в align-items, для конкретного flex-елемента. Можливі значення:

• flex-start - flex-елемент притискається до початку поперечної осі (за замовчуванням);
• flex-end - flex-елемент притискається до кінця поперечної осі;
• center - flex-елемент вирівнюється по центру поперечної осі;
• baseline - flex-елемент вирівнюється по базовій лінії;
• stretch - flex-елементи розтягується, займаючи все доступне місце по поперечної осі. Але якщо задана висота, то stretch буде проігнорований.

приклад

Особливості застосування Flexbox на практиці

1. Вирівнювання по правому краю

Щоб притиснути заголовок сайту вліво, а номер телефону вправо, то заголовку треба задати flex: 1.

.header {display: flex; } .Header .title {flex: 1; }

Якщо ж з якоїсь причини тягнути заголовок на всю ширину не можна, то блоку з номером телефону треба задати margin-left: auto.

.header {display: flex; } .Header .phone {margin-left: auto; }

Для наочності блокам додані пунктирні кордону.

2. Стиснення блоків з довгими словами

Є блок, що складається з назви послуги і номера телефону, за яким її можна замовити. Опис послуги використовує стільки простору, скільки може, а потім переходить на наступний рядок.

.serv {display: flex; } .Serv .description {font-size: 30px; } .Serv .call {margin-left: auto; width: 120px; text-align: center; align-self: center; }

РЕЗУЛЬТАТ:

Будівництво котеджів

Залишити заявку

Тепер в описі послуги з'являється довге слово.

РЕЗУЛЬТАТ:

Будівництво котеджів з пенополістіролбетон блоків

Залишити заявку

Червоної кордоном позначена ширина смартфона, і якщо переповнення приховано (overflow: hidden), то кнопку "Залишити заявку" ніхто не побачить і замовити послугу не зможе.

Справа в тому, що мінімальна ширина (min-width) блоку description за замовчуванням має значення auto, що в даному випадку дорівнює ширині слова "пенополістіролбетон". Значить, flex-елемент не може бути вже, ніж це слово.

Рішення даної проблеми - вказати для flex-елемента нульову мінімальну ширину (min-width: 0). Тепер елемент може бути вже, ніж його вміст. А довге слово можна просто перенести.

.serv {display: flex; } .Serv .description {font-size: 30px; min-width: 0; word-wrap: break-word; } .Serv .call {margin-left: auto; width: 120px; text-align: center; align-self: center; }

РЕЗУЛЬТАТ:

Будівництво котеджів з пенополістіролбетон блоків

Залишити заявку

3. Гарантована ширина

Кнопка "Залишити заявку" по ширині зовсім 120px, як було зазначено в стилях. Справа в тому, що за замовчуванням flex-елемент стискається, якщо місця недостатньо.

Наступні три комбінації розробники Flexbox порахували найбільш часто використовуваними і привласнили їм ключові слова:

flex: 0 1 auto Елемент стискається, якщо місця не вистачає, але не тягнеться ширше, ніж йому треба.
Відповідає flex: initial і є значенням за замовчуванням. flex: 1 + 1 auto Елемент стискається, якщо місця не вистачає і тягнеться для заповнення всього доступного простору. Відповідає flex: auto. flex: 0 0 auto Елемент не змінює свої розміри. Відповідає flex: none.

Отже, щоб ширина кнопки "Залишити заявку" дорівнювала саме 120px, треба їй додати flex: none.

.serv {display: flex; } .Serv .description {font-size: 30px; min-width: 0; word-wrap: break-word; } .Serv .call {margin-left: auto; width: 120px; flex: none; text-align: center; align-self: center; }

РЕЗУЛЬТАТ:

Будівництво котеджів з пенополістіролбетон блоків

Залишити заявку

4. Кілька корисних зауважень

Треба не забувати, що:

• вертикальне вирівнювання (vertical-align) не впливає на flex-елемент,
• для flex-елементів слід повністю уникати використання margin або padding в%,
• відступи (margin) сусідніх flex-елементів ніколи не об'єднуються,
• z-index на flex-елементі працює навіть при position: static,
• для вертикального вирівнювання flex-елементів з різним розміром шрифту краще встановити align-items: baseline.

5. В якості висновку ...

підтримка Flexbox сучасними браузерами досить хороша, за винятком IE11 :(

Читати далі: адаптивна верстка