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

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

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

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

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

правити

Нотатка

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

автор: NagarD правити

Нотатка

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

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

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

flex-grow: number|initial|inherit;

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

number

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

автор: NagarD

правити

initial

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

автор: NagarD

правити

inherit

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

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
flex-grow	29.0	28.0	9.0	12.1	13.0	11.0

Підтримка: мобільні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<div class="row">
    <div>1</div>
    <div>3 — утричі ширший</div>
    <div>1</div>
</div>

.row {
    display: flex;
}

.row div {
    padding: 8px;
    border: 1px solid #0172ad;
}

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