Flex-елементи - це діти flex-контейнера, елементи першого рівня вкладеності. Flex-елементи (далі просто елементи) перестають підкорятися стандартному потоку документа, втрачають свій тип (блоковий, рядковий тощо) і дотримуються правил позиціонування Flexbox-моделі.
Порядок відображення flex-елементів: order
Властивість визначає порядок, в якому flex-елементи відображаються і розташовуються усередині flex-контейнера. Застосовується до flex-елементів. Властивість не успадковується.
Спочатку все flex-елементи мають order: 0, за замовчуванням вони розташовуються в тому порядку, як додані початково у flex-контейнер.
При вказівці значення від -1 для елемента він переміщається в початок, значення 1 - в кінець. Якщо кілька flex-елементів мають однакове значення order, вони будуть відображатися відповідно до вихідного порядку.
.flex-item {
order: <ціле число>;
}
flex-елементи можуть бути переупорядковані за допомогою цієї простої властивості без зміни коду HTML.
See the Pen order by kravets (@raisa69) on CodePen.
Гнучкість flex-елементів: flex-grow
Властивість flex-grow задає коефіцієнт зростання, який визначає, наскільки flex-елемент буде збільшуватися щодо інших flex-елементів у flex-контейнері, при розподілі позитивного вільного простору.
Flex-контейнер розподіляє вільний простір між своїми дочірніми елементами (пропорційно їх коефіцієнту flex-grow) для заповнення контейнера або стискає їх (пропорційно їх коефіцієнту flex-shrink), щоб запобігти переповнення.
flex-grow може впливати на ширину чи висоту, в залежності від властивості flex-direction.
.flex-item {
flex-grow: <число>;
}
See the Pen flex-grow by kravets (@raisa69) on CodePen.
Якщо елементу задати flex-grow:0; , то елементу буде заборонено збільшуватись!
Ще одна ілюстрація роботи властивості flex-grow:
See the Pen Flexbox | Flex-grow by kravets (@raisa69) on CodePen.
Частий випадок застосування властивості flex-grow - картка з «футером» притиснутим до її низу, незалежно від обсягу контенту.
Ця техніка складається з двох кроків:
1. необхідно зробити картку flex-контейнером і поміняти напрямок головної осі таким чином, щоб вона йшла вертикально зверху вниз. Це змусить flex-елементи розташовуватися у стовпчик.
.card {
display: flex;
flex-direction: column;
}
2. Залишилося задати контенту div.content властивість flex-grow, щоб дозволити йому займати все вільне місце на головній осі, відсуваючи «футер» в її кінець, тобто вниз.
.card > .content {
flex-grow: 1;
}See the Pen lesson-06-flex-grow-card by kravets (@raisa69) on CodePen.
Властивість стиснення flex-shrink
flex-shrink задає коефіцієнт стиснення, який визначає, наскільки flex-елемент буде стискатися щодо інших flex-елементів у flex-контейнері, при розподілі негативного вільного простору.
.flex-item {
flex-shrink: <число>;
}За замовчуванням всі flex-елементи можуть бути стиснуті, але якщо встановити значення flex-shrink:0; (без стиснення), то елементи зберігають вихідний розмір.
See the Pen flex-shrink by kravets (@raisa69) on CodePen.
See the Pen Flexbox | Flex-shrink by kravets (@raisa69) on CodePen.
Властивість Flex-Basis
Властивість flex-basis визначає базовий розмір flex-елемента по головній осі. Значення може бути зазначено в будь-яких одиницях виміру CSS, таких як відсотки, пікселі і т. д.
В якості значення також приймається ключове слово auto - тоді на розміри елемента впливають властивості width/height або контент, який в ньому міститься.
Властивість flex-basis може отримувати 4 значення:
- number - Задає ширину елемента в px, mm, pt або у відсотках. Від'ємне значення заборонене.
- auto - Браузер самостійно розмір елемента опираючись на його вміст. Значення без задання.
- initial - Встановлює цю властивість в значення без задання
- inherit - Успадкує значення властивості від свого батьківського елемента
See the Pen flex-basis by kravets (@raisa69) on CodePen.
See the Pen flex-basis by kravets (@raisa69) on CodePen.
See the Pen Flexbox | Flex-basis by kravets (@raisa69) on CodePen.
Приклад застосування властивостей flex-basis, grow, shrink:
See the Pen Flexbox flex-basis, grow, shrink example by kravets (@raisa69) on CodePen.
Властивість flex
Властивість flex є коротким записом і поєднує у собі три властивості: flex-grow, flex-shrink та flex-basis. Другий і третій параметри (flex-shrink та flex-basis) опціональні.
За замовчуванням встановлено такі параметри: flex: 0 1 auto;
Рекомендується використовувати скорочений запис flex замість записувати кожну з трьох властивостей окремо.
See the Pen Flex by kravets (@raisa69) on CodePen.
flex: 1 1 auto; = flex-grow: 1;
.item-1 { flex: 3 1 auto; } /* рівнозначні записи */ .item-1 { flex-grow: 3; }
Властивість align-self
Властивість align-self дозволяє перевизначити вирівнювання за замовчуванням (або перезаписати значення задане властивістю align-items) для окремих flex-елементів.
Властивість align-self набуває тих же значень, що й align-items:
- stretch (значення за умовчанням) - flex-елемент розтягується вздовж поперечної осі (якщо при цьому вказані властивості min-width/max-width, вони беруться до уваги).
- flex-start - flex-елемент притискається до початку поперечної осі.
- flex-end - flex-елемент притискається до кінця поперечної осі.
- center - flex-елемент центрується по поперечній осі.
- baseline - flex-елемент вирівнюється по своїй базовій лінії.
See the Pen Flexbox | Align-self by kravets (@raisa69) on CodePen.
See the Pen align-self : Flexbox by kravets (@raisa69) on CodePen.
See the Pen Align-Self - Flexbox Study Guide by kravets (@raisa69) on CodePen.
Рекомендоване відео для перегляду
Завдання 1
Доповнити код, щоб отримати flex-властивостями для такого результату
See the Pen flex-element-task by kravets (@raisa69) on CodePen.
Завдання 2
See the Pen align-self flexbox css by kravets (@raisa69) on CodePen.
Завдання 3
Не змінюючи HTML-код, додати властивість другому флекс-елементу li (класи застосовувати не можна), щоб цей елемент збільшувався на більших розмірах екранів
See the Pen Flexbox flex-grow by kravets (@raisa69) on CodePen.
Завдання 4
Розташувати флекс-елементи так як на малюнку, застосувавши відповідні властивості до флекс-контейнера і флекс-елементів
See the Pen Flexbox align-self by kravets (@raisa69) on CodePen.