flex-grow
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
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
, чтобы убедиться, что все значения заданы.
Интерактивный пример
Синтаксис
/* Значения типа <number>*/
flex-grow: 3;
flex-grow: 0.6;
/* Глобальные значения */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;
Свойство flex-grow
указывается одним числом — значением типа <number>
.
Значения
Формальный синтаксис
flex-grow =
<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, 0.2);
}
.box1 {
flex-grow: 2;
border: 3px solid rgba(0, 0, 0, 0.2);
}
Результат
Спецификации
Specification |
---|
CSS Flexible Box Layout Module Level 1 # flex-grow-property |
Совместимость с браузерами
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