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 використовується поруч з іншими гнучкими властивостями flex-shrink та flex-basis, і зазвичай визначається за допомогою скорочення flex, щоб забезпечити задання всіх значень.

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

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

<number>

Приклади

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

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

HTML

<h4>Це Flex-Grow</h4>
<h5>А, Б, В і Г – flex-grow:1 . Ґ і Д – flex-grow:2 .</h5>
<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;

  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

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

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

Результат

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

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

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

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

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