flex-grow
How much of the free space a flex item takes.
Syntax
flex-grow: number;Values
| Parameter | Type | Description |
|---|---|---|
| 0 | number | Does not grow (the default). |
| 1, 2… | number | A share of the free space relative to other items. |
Examples
A search field takes all the space next to the button:
<style>
.bar { display: flex; gap: 6px; }
.bar > * { padding: 6px; }
</style>
<div class="bar">
<input placeholder="Search" style="flex-grow: 1;">
<button>Find</button>
</div>Notes
Only the free space is shared: an item with flex-grow: 2 is not necessarily twice as wide — it gets twice as much extra width.
See also
- flex — A shorthand for how a flex item grows, shrinks and what size it starts from.
- flex-shrink — How much a flex item shrinks when there is not enough space.
- flex-basis — The starting size of a flex item along the main axis, before free space is shared.
Related recipes
In the tutorial
- Flex items — How to control individual items in flexbox — flex-grow, flex-shrink, flex-basis, the flex shorthand, align-self, order and margin auto.