In this section, we will learn what the flex-grow property is and how to use it in CSS.
CSS flex-grow Property Definition and Usage
By default, the space that a flex-item takes within a flex-container is equal to its width. But there’s a chance that the total width of the entire flex-items within a flex-container doesn’t fill the available space that the flex-container provides.
In the picture above, we have a flex-container with the width of 100px. There are 3 items each has a width of 25px and they occupied 75px of the total 100px width.
As you can see, we have 25px unused space.
CSS provided a property named `flex-grow` by which we can make one or multiple flex-items to grow more than their original size in order to fill the free space.
CSS flex-grow Property Syntax
CSS flex-grow Property Value
The value we set for `flex-grow` property is unit-less non-negative number (negative numbers don’t have any effect).
Note: the default value is 0 and it means no growth
How Does CSS flex-grow Property Work?
This is how `flex-grow` works:
In our example, let’s say we set the second element to `flex-grow: 2` and the last element to `flex-grow: 1`.
What this means is that we’re asking the browser to first divide the free space within the flex-container into 3 equal blocks.
We say 3 equal blocks, because the total number set for `flex-grow` property in all flex-items in this example is 3. If the total number was 5 then we had 5 equal blocks and so on.
Then, because the second element has `flex-grow: 2` it means the width of this element should increase by 2 blocks. Also, the third element has `flex-grow: 1` and that means the width of this element should increase by 1 block.
This is the final result:
As you can see, using `flex-grow` property, we can simply divide the available free space into equal blocks and add them to flex-items depending on the values they have set for the `flex-grow` property.
Example: flex-grow property in CSS
In the example below, we didn’t use any `flex-grow` property and so there’s available space to be filled.
Now, let’s used
flex-grow property to fill the empty space within the flex-container: