MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Опис

Властивість 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

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

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,