flex-grow
Determines how eagerly an item grows to fill free space.
- Initial value
0- Inherited
- No
- Animatable
- yes, as a number
- Applies to
- flex items
- JavaScript
element.style.flexGrow = "1"
Example
#.search {
display: flex;
gap: 8px;
}
.search input {
flex-grow: 1;
}<form class="search stage">
<input placeholder="Search for a course" style="padding: 8px 10px;">
<button type="submit">Search</button>
</form>Definition and usage
#The flex-grow property takes a number that says how much of the container’s free space an item gets. With the default 0, an item doesn’t grow at all.
The numbers work proportionally. If one item has flex-grow: 2 and another 1, the first one gets twice as much extra space. Note that only the free space is divided up, so items with different content don’t necessarily end up with proportional widths.
For sizes that are strictly proportional to the numbers, combine flex-grow with flex-basis: 0, most conveniently with the flex: 1 shorthand.
Syntax
#flex-grow: <number>;Values
#Values in practice
#0
.target { flex-grow: 0; }1
.target { flex-grow: 1; }1, 1, 1
.demo .box { flex-grow: 1; }2, 1
.demo .box { flex-grow: 1; }
.target { flex-grow: 2; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- A search field with a button next to it is a classic case: the field gets
flex-grow: 1, the button stays at its natural size. - For equal columns, use
flex: 1rather thanflex-grow: 1alone.
Related entries
#- flex-shrinkDetermines how much an item shrinks when the container runs out of room.
- flex-basisSets a flex item’s starting size on the main axis, before it grows or shrinks.
- flexA shorthand that sets an item’s flex-grow, flex-shrink, and flex-basis.
- justify-contentPositions items along the main axis of a flex or grid container.
Spotted a mistake or missing an example? Write to us.