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


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

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

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

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

Приймаються цілі (1, 2, 3, ...) або дробові числа (наприклад: 0.6). Негативні значення ігноруються.

Нотатка:

Властивість flex працює тільки зі гнучкими елементами, тобто з тими елементами, у котрих властивість display встановлена як flex (display: flex; або display: inline-flex).

Нотатка:

Рекомендується застосовувати властивість flex для скороченого запису, а не flex-grow, flex-shrink і flex-basis окремо.

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

Синтаксис

flex-grow: number|initial|inherit;

Властивість flex-grow може отримувати 3 значення:

number

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

initial

Встановлює цю властивість в значення без задання

inherit

Успадкує значення властивості від свого батьківського елемента

Значення без задання: 0
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.flexGrow="5"

Переглядачі

Переглядач
flex-grow

29.0

11.0

28.0

9.0

12.1

13.0

Переглядач
flex-grow

4.4

28.0

9.2


Мобільних переглядачів ще не додано.

Приклади


Демонстрація дії різних значень властивості

Простий приклад роботи властивості

Приклад роботи властивості

Середній елемент буде в 3 рази більший за інші.

div:nth-of-type(1) {flex-grow: 1;}


div:nth-of-type(2) {flex-grow: 3;}


div:nth-of-type(3) {flex-grow: 1;}

Додаткові посилання