flex-grow

Сводка

Свойство CSS flex-grow определяет, какую часть свободного пространства может занять контейнер, в соотношении с другими контейнерами.

Начальное значение	`0`
Применяется к	flex-элементы, в том числе в потоке псевдоэлементов
Наследуется	нет
Отображение	визуальный
Обработка значения	как указано
Animation type	число
Канонический порядок	уникальный неоднозначный порядок, определённый формальной грамматикой

См. 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>. Отрицательные значения недопустимы.

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

<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);
}

Результат

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

Спецификация	Статус	Комментарий
CSS Flexible Box Layout Module Определение 'flex-grow' в этой спецификации.	Кандидат в рекомендации	Первичное определение

Совместимость с браузерами

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	Internet Explorer	Opera	Safari
Basic support	18.0 (18.0)^[1]	21.0-webkit	11	12.10	6.1-webkit
< 0 animate	32.0 (32.0)^[2]	49.0	?	Нет	Нет

Feature	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Basic support	18.0 (18.0)^[1]	?	Нет	12.10	Нет
< 0 animate	32.0 (32.0)^[2]	?	?	Нет	Нет

[1] Firefox supports only single-line flexbox until Firefox 27. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference layout.css.flexbox.enabled to true.

In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[2] Before Firefox 32, Gecko wasn't able to animate values starting or stopping at 0(Spec, Demo).

Смотрите также

Using CSS flexible boxes

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

Внесли вклад в эту страницу: MrDaedra, karpulix

Обновлялась последний раз: MrDaedra, 6 июн. 2017 г., 7:41:13