flex-grow

Опис

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

Initial value	`0`
Applies to	flex items, including in-flow pseudo-elements
Inherited	no
Media	visual
Computed value	as specified
Animation type	a number
Canonical order	the 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!

Desktop
Mobile

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(Spec, Demo).

Дивись також

Using CSS flexible boxes