CSS flexgrow Property (original) (raw)
CSS flex-grow Property
Last Updated : 11 Jul, 2025
The CSS flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container. It is essential for responsive design, allowing elements to expand based on available space, and ensuring a dynamic and adaptable layout.
**Note: If the item in the container is not flexible then the flex-grow property will not affect that item.
**Syntax
flex-grow: number| initial| inherit;
**Default Value: 0
**Property values
| Property Value | Description |
|---|---|
| **number | A number that defines how the item will grow compared to other flexible items. |
| **initial | It sets the value to its default value. |
| **inherit | It inherits the property from its parent elements. |
Example 1: Basic Usage of flex-grow
In this example, we have a container with five div elements. The second div has a flex-grow value of 2, which means it will grow twice as much as the other div elements.
HTML `
Flex Grow Example