css властивість flex-grow
CSS властивість flex-grow визначає коефіціент збільшення гнучкого елемента, по відношенню до інших гнучких елементів, всередині того ж контейнера, якщо всередині нього залишається вільний простір.
У гнучкому контейнері, нащадки можуть бути розташовані у будь-якому напрямку, і можуть змінювати власні розміри: збільшувати, щоб заповнити батьківський елемент, або зменшувати, щоб не вилізти за його межі.
Коефіціент задається цифрами. Тобто, якщо маємо один контейнер з трьома гнучкими елементами і для всіх елементів встановлено flex-grow: 1, то вони будуть однакового розміру. Якщо якийсь елемент отримав значення flex-grow: 2, то цей елемент буде в два рази більшим за інші елементи цього контейнера.
Приймаються цілі (1, 2, 3, ...) або дробові числа (наприклад: 0.6). Негативні значення ігноруються.
| Нотатка: | Властивість |
| Нотатка: | Рекомендується застосовувати властивість Тому що це робить стилі коротшими, зрозумілішими, а також тому, що універсальна властивість правильно скидає значення не заданих властивостей до початкового (без задання). |
Синтаксис
flex-grow: number|initial|inherit;Властивість flex-grow може отримувати 3 значення:
| Значення без задання: | 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;}