Flex Grow

Control how flex items grow to fill the available space.

The flexGrow property defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

Example

Quick Notes

• Without flexGrow, items size to their content or defined size.
• If all items have flexGrow: 1, the remaining space in the container will be distributed equally to all children.

Next Steps

• Flex Shrink
• Flex Basis