Flexgrow

Flex-grow is a CSS property used in flexbox layouts to determine how much a flex item expands relative to the other items in the same container when there is extra space available. It represents the growth factor of the item and does not set a fixed final size by itself.

Value and behavior: The flex-grow property accepts a non-negative unitless number. The default is 0, meaning the item will not grow. Positive values cause items to take additional space in proportion to their grow factors. If multiple items have positive flex-grow values, the remaining free space is distributed among them in proportion to their flex-grow values.

Mechanism: After accounting for each item’s flex-basis (the initial size), any remaining space in the flex container is allocated according to the grow factors. If the total grow factor is, for example, 3 and one item has a grow of 2 while another has 1, the first item gets two-thirds of the free space and the second gets one-third. If all items have a grow value of 0, the container’s remaining space is unused for growth.

Relation to other properties: Flex-grow is often used with the flex shorthand property, which can specify grow, shrink, and basis (for example, flex: 1 0 auto). It also interacts with flex-basis and container sizing; growth applies only to the free space, not to the base size, and is affected by the flex-direction and max/min sizing constraints.

Usage examples: Setting equal growth across items (flex-grow: 1 on all items) distributes space evenly. Assigning different grow values (e.g., 2, 1, 1) creates a layout where some items take more of the remaining space than others.

Browser support: Flex-grow is widely supported in all modern browsers as part of the flexbox specification.