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
, щоб забезпечити задання всіх значень.
Формальне визначення
Початкове значення | 0 |
---|---|
Успадковується | ні |
Обчислене значення | as specified |
Формальний синтаксис
<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 rgba(0, 0, 0, 0.2);
}
.double {
flex-grow: 2;
border: 3px solid rgba(0, 0, 0, 0.2);
}
Результат
Коли шість гнучких елементів розподіляються вздовж головної осі контейнера, то якщо сума головного вмісту цих гнучких елементів менша за довжину головної осі контейнера, то надлишковий простір розподіляється між гнучкими елементами, причому А, Б, В і Г отримують по 12,5% вільного простору, а Ґ і Д – по 25%.
Специфікації
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flex-grow
|
Chrome Full support 29 | Edge Full support 12 | Firefox Full support 20 | Internet Explorer Full support 11 | Opera Full support 12.1 | Safari Full support 9 | WebView Android Full support 4.4 | Chrome Android Full support 29 | Firefox for Android Full support 20 | Opera Android Full support 12.1 | Safari on iOS Full support 9 | Samsung Internet Full support 2.0 |
<0 animate
|
Chrome Full support 49 | Edge Full support 79 | Firefox Full support 32 | Internet Explorer No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox for Android Full support 32 | Opera Android Full support 36 | Safari on iOS No support No | Samsung Internet Full support 5.0 |
Дивіться також
- Посібник зі Флексбоксу CSS: Базові концепції флексбоксу
- Посібник зі Флексбоксу CSS: Контроль співвідношень гнучких елементів на головній осі
- Стаття
flex-grow
– дивний. Або ні? від Мануеля Матузовича на CSS-Tricks, яка ілюструє те, як працює flex-grow