Опис

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

Initial value0
Applies toflex items, including in-flow pseudo-elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typea number
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Можете більш детальніше довідатся як користуватись властивостями flex з наступної статті Using CSS flexible boxes

Синтаксис

/* <number> values */
flex-grow: 3;
flex-grow: 0.6;

/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;

Значення

<number>
Дивись <number>. Значення менші за 0 є недійсними.

Formal syntax

<number>

Приклад

HTML

<h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
  <div class="box" style="background-color:brown;">F</div>
</div>

CSS

#content {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
    
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
}

.box {
  flex-grow: 1;
  border: 3px solid rgba(0,0,0,.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0,0,0,.2);
}

Результат

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

Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex-grow' in that specification.
Candidate Recommendation Initial definition

Підтримка браузерів

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Базова підтримка 18.0 (18.0)[1] 21.0-webkit (Yes)-webkit
(Yes)
11 12.10 6.1-webkit
< 0 animate 32.0 (32.0)[2] 49.0 ? ? No support No support
Feature Firefox Mobile (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
Базова підтримка 18.0 (18.0)[1] ? (Yes)-webkit
(Yes)
No support 12.10 No support
< 0 animate 32.0 (32.0)[2] ? ? ? No support No support

[1] Firefox підтримує лише однострочні flexbox конструкції до версії Firefox 27. Щоб активувати підтримку flexbox властивостей, для Firefox 18 та 19, користувачу потрібно змінити параметр layout.css.flexbox.enabled на true у файлі налаштувань about:config.

В додаток до непрефіксної підтримки, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) додана підтримка для -webkit префіксних варіацій властивостей для підтримки веб-сумісності, для цього потрібно змінити властивість layout.css.prefixes.webkit на true, яка за замовченням встановлена - false. Але з релізу Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) ця властивість набуває значення true за замовченням.

[2] До того як вийшла версія Firefox 32, Gecko не був в змозі анімувати знаяення які починалися чи закінчувалися на 0(SpecDemo).

Дивись також

Мітки документа й учасники

Зробили внесок у цю сторінку: Ingvarr
Востаннє оновлена: Ingvarr,