Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
Сводка
Свойство 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' в этой спецификации. |
Кандидат в рекомендации | Первичное определение |
Совместимость с браузерами
| 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).