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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Смотрите также
- Руководство по 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