CSS flex-grow property lets a flex item to grow if needed. Its initial value is 0. That mean by default flex item does not grow. It can take any positive value. All flex items grow in proportion of their flex-grow value.
Syntax:
.someflexcontainer {
display: flex;
}
.flexitem {
flex-grow: 1;
}CSS property flex-grow
| CSS version: | CSS 3 |
| Value: | number |
| Initial: | 0 |
| Applies to: | flex items |
| Inherited: | no |
Example – flex-grow
In the following code, CSS property flex-grow can be changed to the following values
- 0
- 1
<style>
.fbox {
display: flex;
width: 250px; background-color:gray;
}
.child {
background-color:green;
padding: 3px; margin: 3px;
flex-grow: 0;
}
</style>
<div class=fbox>
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
</div>flex-grow refresh
Specification and Browser compatibility
| Specification | Status | Categories |
|---|---|---|
| Flexible Box Layout Module | W3C Working Draft | CSS3 |
| Chrome | Firefox | IE | Edge | Safari | Opera |
|---|---|---|---|---|---|
| Yes 29+ | Yes 28+ | Partial 11+ | Yes 12+ | Yes 9+ | Yes 12.1+ |
| Android Chrome | Android Firefox | iOS Safari | IE Mobile | Opera Mobile |
|---|---|---|---|---|
| Yes 47+ | Yes 44+ | Yes 9.0-9.2+ | Yes 11+ | Yes 12.1+ |
source: caniuse.com
