The flex-grow
CSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up. The flex grow factor of a flex item is relative to the size of the other children in the flex-container.
/* <number> values */ flex-grow: 3; flex-grow: 0.6; /* Global values */ flex-grow: inherit; flex-grow: initial; flex-grow: unset;
<div class="grid"> <div class="row"> <div class="cell">flex-grow: <div class="container"> <div class="item small"><strong>0.5</strong></div> <div class="item mid"><strong>1</strong></div> <div class="item large"><strong>2</strong></div> </div> </div> </div> </div>
html,body { height: 100%; box-sizing: border-box; background: #EEE; } .grid { width: 100%; height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; } .cell { margin: .5em; padding: .5em; background-color: #FFF; overflow: hidden; text-align: left; flex: 1; white-space: nowrap; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: 1; white-space: nowrap; } .container { background: #E4F0F5; margin-top: .5em; display: flex; } .item { border: 1px solid black; padding: 1em; } .small { flex-grow: 0.5; } .mid { flex-grow: 1; } .large { flex-grow: 2; }
Initial value | 0 |
---|---|
Applies to | flex items, including in-flow pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | a number |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
The flex-grow
property is specified as a single <number>
.
Values
Formal syntax
<number>
Example
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); }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex-grow' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 21 -webkit- | Yes Yes -webkit- | 201 18 — 202 | 113 | 12.1 15 -webkit- | 6.1 -webkit- |
<0 animate | 49 | ? | 324 | ? | No | No |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | Yes Yes -webkit- | 201 18 — 202 | No | 12.1 15 -webkit- | ? |
<0 animate | ? | ? | ? | 324 | ? | No | No |
1. Since Firefox 28, multi-line flexbox is supported.
2. From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
3. Supported as -ms-flex-positive
.
4. Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0
.
See also
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Controlling Ratios of flex items along the main axis
- `flex-grow` is weird. Or is it? article by Manuel Matuzovic on CSS-Tricks, which illustrates how flex-grow works