flex-grow

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

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

Спробуйте його в дії

Синтаксис

/* Значення <number> */
flex-grow: 3;
flex-grow: 0.6;

/* Глобальні значення */
flex-grow: inherit;
flex-grow: initial;
flex-grow: revert;
flex-grow: revert-layer;
flex-grow: unset;

Властивість flex-grow задається у вигляді єдиного значення <number>.

Значення

<number>

Дивіться <number>. Від'ємні значення є недійсними. Усталено – 0, що не дає гнучкому елементу зростати.

Опис

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

Головний розмір – це або ширина, або висота елемента, залежно від значення flex-direction.

Решта простору, також відома як додатний вільний простір, - це розмір гнучкого контейнера мінус розмір всіх гнучких елементів разом. Якщо у всіх сусідніх елементів один і той же множник зростання, то всі елементи отримають однакові частки вільного простору. Поширена практика – задавати flex-grow: 1, проте задання множника зростання для всіх гнучких елементів зі значенням 88, 100, 1.2 або будь-яким іншим, більшим за 0, дасть один і той же результат: значення – це коефіцієнт співвідношення.

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

Наприклад, якщо чотири гнучкі елементи 100px перебувають у контейнері 700px, і ці елементи мають множники flex-grow зі значеннями 0, 1, 2 і 3 відповідно, тоді їхній сумарний головний розмір – 400px, а залишається 300px додатного вільного простору для розподілу. Є сума із 6 множників зростання (3 + 2 + 1), тому кожний множник зростання дорівнює 50px ((300px / 6 ). Кожний гнучкий елемент отримує кількість додатного вільного простору, що дорівнює кількості вище, помноженій на його значення flex-grow – тобто 0, 50px, 100px і 150px відповідно. Маємо сумарні розміри гнучких елементів 100px, 150px, 200px і 250px відповідно.

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

Формальне визначення

Формальний синтаксис

<number>

Приклади

Задання множника зростання гнучкого елемента

У цьому прикладі сумарний множник зростання вісім розподіляється між шістьома гнучкими елементами, що означає, що кожен множник зростання становить 12,5% від вільного простору.

HTML

<h1>Це приклад <code>flex-grow</code></h1>
<p>
  А, Б, В і Д мають <code>flex-grow: 1</code>. Г і Ґ мають
  <code>flex-grow: 2</code>.
</p>
<div id="content">
  <div class="small" style="background-color:red;">А</div>
  <div class="small" style="background-color:lightblue;">Б</div>
  <div class="small" style="background-color:yellow;">В</div>
  <div class="double" style="background-color:brown;">Г</div>
  <div class="double" style="background-color:lightgreen;">Ґ</div>
  <div class="small" style="background-color:brown;">Д</div>
</div>

CSS

#content {
  display: flex;
}

div > div {
  border: 3px solid rgb(0 0 0 / 20%);
}

.small {
  flex-grow: 1;
}

.double {
  flex-grow: 2;
  border: 3px solid rgb(0 0 0 / 20%);
}

Результат

Коли шість гнучких елементів розподіляються вздовж головної осі контейнера, то якщо сума головного вмісту цих гнучких елементів менша за довжину головної осі контейнера, то надлишковий простір розподіляється між гнучкими елементами, причому А, Б, В і Д отримують по 12,5% вільного простору, а Г і Ґ – по 25%.

Специфікації

Сумісність із браузерами

Дивіться також

• Скорочення flex
• Базові концепції флексбоксу
• Контроль співвідношень гнучких елементів на головній осі
• Модуль Компонування гнучкої рамки CSS
• flex-grow – дивна властивість. Або це не так? на CSS-Tricks (2017)