Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Сводка

Свойство 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(SpecDemo).

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

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

Внесли вклад в эту страницу: MrDaedra, karpulix
Обновлялась последний раз: MrDaedra,