YouTip

# CSS flex-grow Property The `flex-grow` property specifies how much a flex item will grow relative to the rest of the flex items inside the same container when positive free space is available. --- ## Quick Example In the following example, we set the second flex item to grow three times more than the first and third items: ```css /* First item */ div:nth-of-type(1) { flex-grow: 1; } /* Second item */ div:nth-of-type(2) { flex-grow: 3; } /* Third item */ div:nth-of-type(3) { flex-grow: 1; } ``` --- ## Definition and Usage The `flex-grow` property defines the flex grow factor, which determines how much the flex item will grow relative to the other flex items in the flex container when there is remaining space. > **Note:** The `flex-grow` property has no effect if the element is not a direct child of a flex container (an element with `display: flex` or `display: inline-flex`). ### Property Specifications | Feature | Description | | :--- | :--- | | **Default Value** | `0` | | **Inherited** | No | | **Animatable** | Yes | | **CSS Version** | CSS3 | | **JavaScript Syntax** | `object.style.flexGrow = "5"` | --- ## CSS Syntax ```css flex-grow: number | initial | inherit; ``` ### Property Values | Value | Description | | :--- | :--- | | *number* | A unitless number serving as a proportion. It dictates how much the item will grow relative to the other flex items. Default value is `0` (which means it won't grow to fill extra space). Negative numbers are invalid. | | `initial` | Sets this property to its default value (`0`). | | `inherit` | Inherits this property from its parent element. | --- ## Detailed Explanation & Calculation To understand how `flex-grow` works, consider a flex container with a total width of `500px`. Suppose we have three items inside it, each with a base width (`flex-basis`) of `100px`. * **Total base width of items:** $100\text{px} + 100\text{px} + 100\text{px} = 300\text{px}$ * **Remaining free space:** $500\text{px} - 300\text{px} = 200\text{px}$ If we assign the following `flex-grow` values: * Item 1: `flex-grow: 1` * Item 2: `flex-grow: 2` * Item 3: `flex-grow: 1` The total sum of the grow factors is $1 + 2 + 1 = 4$. The remaining $200\text{px}$ of free space is distributed proportionally: * **Item 1 receives:** $200\text{px} \times (1 / 4) = 50\text{px}$ (New width: $150\text{px}$) * **Item 2 receives:** $200\text{px} \times (2 / 4) = 100\text{px}$ (New width: $200\text{px}$) * **Item 3 receives:** $200\text{px} \times (1 / 4) = 50\text{px}$ (New width: $150\text{px}$) --- ## Browser Support The numbers in the table specify the first browser version that fully supports the property. Numbers followed by `-webkit-`, `-moz-`, or `-ms-` specify the first version that supported the property with a vendor prefix. | Property | Chrome | Edge / IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **flex-grow** | 29.0
21.0 `-webkit-` | 11.0
10.0 `-ms-` | 28.0
18.0 `-moz-` | 9.0
6.1 `-webkit-` | 17.0 | --- ## Related Articles * CSS Reference: (css3-pr-flex.html) * CSS Reference: (css3-pr-flex-basis.html) * CSS Reference: (css3-pr-flex-direction.html) * CSS Reference: (css3-pr-flex-flow.html) * CSS Reference: (css3-pr-flex-shrink.html) * CSS Reference: (css3-pr-flex-wrap.html)