flex-grow
Specifies the grow factor of a flex item. Controls how much free space in the container each item receives when distributing the remaining space.
Sample Code
/* Do not grow (initial value) */
.item { flex-grow: 0;}
/* Distribute free space equally */
.item-grow { flex-grow: 1;}
/* Grow at twice the rate of other items */
.item-double { flex-grow: 2;}
Available Values
| Value | Description |
|---|---|
| <number> | A number of 0 or greater. Initial value is '0' (no growth). Negative values are invalid. |
Specification
| Item | Details |
|---|---|
| Initial value | 0 |
| Applies to | Flex items |
| Inherited | No |
| Animation | Yes (interpolated as number) |
Browser Compatibility
Chrome29+ ○
28 △27 △26 △25 △24 △23 △22 △21 or earlier ×
Firefox20+ ○
19 or earlier ×
Safari9+ ○8 △
7 △6 or earlier ×
Edge12+ ○
IE11 ○10 △9 ×
8 ×7 ×
6 ×
Opera12.1+ ○
11 or earlier ×
iOS Safari9+ ○8 △7 △6 or earlier ×
Android Browser4.4+ ○3 or earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○Overview
'flex-grow' is a property applied to flex items that specifies how the remaining free space in the container is distributed among items. The initial value is '0', meaning items do not grow even if there is free space.
How Growth Works
The 'flex-grow' value works as a ratio. If all items have 'flex-grow: 1', free space is distributed equally. If one item has 'flex-grow: 2', that item receives twice as much free space as others.
/* Container width: 600px, total item width: 300px → free space: 300px */
/* All items flex-grow: 1 → each gets 100px */
.item-a { flex-grow: 1;} /* 100px + 100px = 200px */
.item-b { flex-grow: 1;} /* 100px + 100px = 200px */
.item-c { flex-grow: 1;} /* 100px + 100px = 200px */
/* item-b flex-grow: 2 → distributed in ratio 1:2:1 */
.item-a { flex-grow: 1;} /* 100px + 75px = 175px */
.item-b { flex-grow: 2;} /* 100px + 150px = 250px */
.item-c { flex-grow: 1;} /* 100px + 75px = 175px */
Pattern 1: Fill the Remaining Space
/* Sidebar + main content layout */
.layout {
display: flex;
}
.sidebar {
width: 250px; /* fixed width */
flex-shrink: 0; /* do not shrink */
}
.main {
flex-grow: 1; /* take all remaining space */
}
Pattern 2: Equal-Width Items
/* Make all items the same width */
.equal-container {
display: flex;
}
.equal-item {
flex-grow: 1;
flex-basis: 0; /* start from 0 so space is distributed equally */
}
Difference Between 'flex-grow: 1' and 'width: 100%'
'flex-grow: 1' means "grow by distributing the container's free space", while 'width: 100%' means "expand to the full container width". They may look the same when there is only one item, but behave differently with multiple items. Use 'flex-grow' inside flex containers.
Related Properties
| Property | Description |
|---|---|
| flex-shrink | Specifies the shrink factor. 'flex-grow' is for distributing free space, 'flex-shrink' is for reducing size when space is insufficient. |
| flex-basis | Specifies the base size. The 'flex-grow' calculation applies to the free space remaining after the 'flex-basis' size. |
| flex | Shorthand for 'flex-grow', 'flex-shrink', and 'flex-basis'. Using 'flex' is recommended over specifying them individually. |
If you find any errors or copyright issues, please contact us.
シェアする