Flex Grow

Control how flex items grow to fill the available space.

The flexGrow property distributes positive free space between flex items after their initial sizes and gaps are accounted for. It accepts a unitless factor, defaulting to 0; it does not specify a share of the container's entire size.

Example

Quick Notes

• With flexGrow: 0, items do not grow to consume free space, but may still shrink.
• Equal grow factors give equal shares of free space until size constraints intervene. Final widths can differ when the initial sizes differ.

Next Steps

• Flex Shrink
• Flex Basis