Властивості елемента
Last updated
Last updated
Flex-елементи - це дочірні елементи flex-контейнера (але НЕ нащадки 2 і подальшого рівня вкладеності) Flex-елементи позиціонуються згідно з правилами Flexbox-моделі та не підкорюються стандартному потоку документа.
Властивість flex-basis вказує початковий розмір елемента в flex-контейнері перед тим, як відбудеться розподіл вільного простору. Ця властивість задає початкову "базову" ширину, висоту або обидві для flex-елемента. flex-basis можна виразити в пікселях, відсотках (відносно батьківського контейнера) або ключових словах, таких як auto або content.
По суті flex-basis - це заміна властивості width для flex-елементів, але з деякими особливостями.
Якщо вказані обидві властивості, flex-basis і width, то властивість width проігнорується.
flex-basis - це не фінальний розмір елемента, а розмір до розподілу вільного простору.
Властивості min-width і max-width працюють як обмежувачі розміру елемента, навіть якщо у нього вказаний flex-basis, а не width.
Властивість flex-basis може визначати висоту, а не ширину елемента. Це відбувається у разі, якщо головна вісь - вертикальна.
Властивість flex-grow визначає, на скільки елемент може розширитися відносно інших flex-елементів у контейнері, якщо є вільний простір.
Значення властивості flex-grow - це невід'ємне число, яке вказує на пропорцію, в якій елементи розтягуються відносно один одного. Чим більше значення flex-grow, тим більше вільного простору елемент зможе зайняти. За замовчанням у всіх елементів встановлено значення flex-grow: 0, тобто елементи не намагаються зайняти додаткове вільне місце, навіть якщо таке є.
У цьому прикладі, якщо є вільний простір у flex-контейнері, елемент з flex-grow: 2 займе вільний простір удвічі швидше, ніж інші елементи з flex-grow: 1. Якщо всі елементи мають однакові значення flex-grow, вони будуть розтягуватися рівномірно.
flex-grow працює тільки в контексті доступного вільного простору. Якщо вільного простору немає (наприклад, всі flex-елементи мають фіксовану ширину), flex-grow не буде мати впливу. Ця властивість використовується для створення гнучких та адаптивних макетів, де елементи можуть динамічно розтягуватися в залежності від контексту відображення.
Використовуючи flex-grow можна робити гумовий контент - фіксованої ширини сайдбар і весь інший простір під контент. Для цього просто достатньо задати flex-grow: 1;
Часто властивість flex-grow використовують у картках для встановлення однакового за розміром блоку по вертикалі, якщо у сусідніх елементів висота за вмістом відрізняється.
Без цього налаштування вільний простір буде вкінці flex-контейнера. Якщо елементу задати властивість flex-grow: 1; то він візуально заповнить весь простір собою.
Для цього контейнеру потрібно задати вертикальне розміщення елементів.
А самому елементу, яким ми хочемо наповнити простір надаємо властивість flex-grow.
Властивість flex-shrink вказує, на скільки елемент може стиснутися відносно інших flex-елементів у контейнері, якщо не вистачає місця.
Значення властивості flex-shrink - це невід'ємне число, яке вказує на пропорцію, в якій елементи можуть стиснутися. Чим більше значення flex-shrink, тим більше елемент може стиснутися у випадку обмеженого простору. Використовується досить рідко.
Властивість align-self використовується на конкретних flex-елементах у flex-контейнері для перезаписування значення властивості align-items для цього конкретного елемента. Іншими словами, align-self дозволяє індивідуально вирівнювати конкретний елемент у поперечному напрямку (перпендикулярно до головної осі flex-контейнера) відносно решти елементів в контейнері.
flex-start: Вирівнює елемент від початку контейнера.
flex-end: Вирівнює елемент від кінця контейнера.
center: Вирівнює елемент по центру контейнера.
baseline: Вирівнює елемент за базовою лінією тексту інших елементів.
stretch: Розтягує елемент, щоб він відповідав висоті контейнера.
Часто використовується для усунення розтягування картинки у flex-контейнері. Але в цьому випадку властивість застосовується не до контейнера, а до конкретного елемента.
Властивість order вказує порядок розташування flex-елементів у flex-контейнері. Замість того, щоб відображати елементи у порядку їх розташування в розмітці документа, order дозволяє перерозподілити їх порядок відображення.
Значення order - це ціле число. За замовчуванням усі flex-елементи мають значення order: 0. Можна встановити властивість order для конкретного flex-елемента, щоб змінити його порядок відображення.
Якщо встановити різні значення order для різних елементів, вони будуть відображатися у тому порядку, який вказано значенням order. Якщо два або більше елементи мають однакове значення order, їх порядок відображення відповідатиме їхньому порядку в розмітці документа.
