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 сентябрь 2015 г..
* Some parts of this feature may have varying levels of support.
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, чтобы убедиться, что все значения заданы.
Интерактивный пример
flex-grow: 1; flex-grow: 2; flex-grow: 3; <section class="default-example" id="default-example"> <div class="transition-all" id="example-element">I grow</div> <div>Item Two</div> <div>Item Three</div> </section> .default-example { border: 1px solid #c5c5c5; width: auto; max-height: 300px; display: flex; } .default-example > div { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue; margin: 10px; flex-grow: 1; flex-shrink: 1; flex-basis: 0; } Синтаксис
/* Значения типа <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 |
| Начальное значение | 0 |
|---|---|
| Применяется к | flex-элементы, в том числе в потоке псевдоэлементов |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | число |
Совместимость с браузерами
Смотрите также
- Руководство по CSS Flexbox: Basic Concepts of Flexbox
- Руководство по CSS Flexbox: Controlling Ratios of flex items along the main axis
flex-growis weird. Or is it? статья Мануэля Матузовича (Manuel Matuzovic) на CSS-Tricks, которая показывает как работает flex-grow