Що робить flex-grow?

CSSJunior~1 хв читання

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

Принцип:

flex-grow: 0: елемент не росте (значення за умовчанням)
flex-grow: 1: елемент заповнює вільне місце
якщо у кількох елементів різні значення, простір ділиться пропорційно

Приклад:

css

.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
.item3 { flex-grow: 1; }

Якщо залишиться вільне місце, воно розподілиться так:

item2 отримає в 2 рази більше, ніж item1 і item3
підсумковий розподіл: 1 : 2 : 1

Коротко: flex-grow відповідає за те, наскільки сильно елемент розширюється, щоб зайняти зайвий простір.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.