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

Flex-елементи - це дочірні елементи flex-контейнера (але НЕ нащадки 2 і подальшого рівня вкладеності) Flex-елементи позиціонуються згідно з правилами Flexbox-моделі та не підкорюються стандартному потоку документа.

Властивість flex-basis

Властивість flex-basis вказує початковий розмір елемента в flex-контейнері перед тим, як відбудеться розподіл вільного простору. Ця властивість задає початкову "базову" ширину, висоту або обидві для flex-елемента. flex-basis можна виразити в пікселях, відсотках (відносно батьківського контейнера) або ключових словах, таких як auto або content.

flex-basis: auto | значення

По суті flex-basis - це заміна властивості width для flex-елементів, але з деякими особливостями.

• Якщо вказані обидві властивості, flex-basis і width, то властивість width проігнорується.

• flex-basis - це не фінальний розмір елемента, а розмір до розподілу вільного простору.

• Властивості min-width і max-width працюють як обмежувачі розміру елемента, навіть якщо у нього вказаний flex-basis, а не width.

• Властивість flex-basis може визначати висоту, а не ширину елемента. Це відбувається у разі, якщо головна вісь - вертикальна.

Властивість flex-grow

Властивість flex-grow визначає, на скільки елемент може розширитися відносно інших flex-елементів у контейнері, якщо є вільний простір.

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

flex-grow: частка

.flex-item2 {
  flex-grow: 2; /* Цей елемент може розширюватися удвічі швидше, ніж інші flex-елементи */
}

У цьому прикладі, якщо є вільний простір у 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; то він візуально заповнить весь простір собою.

Для цього контейнеру потрібно задати вертикальне розміщення елементів.

.card {
  display: flex;
  flex-direction: column;
}

А самому елементу, яким ми хочемо наповнити простір надаємо властивість flex-grow.

.card-text {
  flex-grow: 1;
}

Властивість flex-shrink

Властивість flex-shrink вказує, на скільки елемент може стиснутися відносно інших flex-елементів у контейнері, якщо не вистачає місця.

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

flex-shrink: частка

Властивість align-self

Властивість align-self використовується на конкретних flex-елементах у flex-контейнері для перезаписування значення властивості align-items для цього конкретного елемента. Іншими словами, align-self дозволяє індивідуально вирівнювати конкретний елемент у поперечному напрямку (перпендикулярно до головної осі flex-контейнера) відносно решти елементів в контейнері.

align-self: auto | flex-start | flex-end | center | baseline | stretch

flex-start: Вирівнює елемент від початку контейнера.

flex-end: Вирівнює елемент від кінця контейнера.

center: Вирівнює елемент по центру контейнера.

baseline: Вирівнює елемент за базовою лінією тексту інших елементів.

stretch: Розтягує елемент, щоб він відповідав висоті контейнера.

Часто використовується для усунення розтягування картинки у flex-контейнері. Але в цьому випадку властивість застосовується не до контейнера, а до конкретного елемента.

Властивість order

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

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

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

order: позиція