CSS-свойство flex-grow
определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»). Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. Если все sibling-элементы (sibling items — элементы одного уровня вложенности, состоящие по отношению друг к другу в родственной связи как брат или сестра), имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определенным различными коэффициентами flex-grow.
На практике flex-grow используется вместе с другими flex-свойствами flex-shrink
и flex-basis
, и обычно определяется с помощью сокращения (shorthand) flex
, чтобы убедиться, что все значения заданы.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Синтаксис
/* Значения типа <number>*/
flex-grow: 3;
flex-grow: 0.6;
/* Глобальные значения */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;
Свойство flex-grow
указывается одним числом — значением типа <number>
.
Значения
<number>
- См.
<number>
. Отрицательные значения недопустимы. По умолчанию 0.
Формальный синтаксис
Пример
HTML
<h4>Это — Flex-Grow</h4>
<h5>A,B,C и F имеют коэффициент увеличения flex-grow:1, а D и E — 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' в этой спецификации. |
Кандидат в рекомендации | Первичное определение |
Начальное значение | 0 |
---|---|
Применяется к | flex-элементы, в том числе в потоке псевдоэлементов |
Наследуется | нет |
Обработка значения | как указано |
Animation type | число |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Руководство по CSS Flexbox: Basic Concepts of Flexbox
- Руководство по CSS Flexbox: Controlling Ratios of flex items along the main axis
- `flex-grow` is weird. Or is it? статья Мануэля Матузовича (Manuel Matuzovic) на CSS-Tricks, которая показывает как работает flex-grow