flex-grow

Summary

The flex-grow CSS property specifies how much a flex item will enlarge with respect to the other items in the flex container to fill an expanded container.

Overview table

Initial value: 0
Applies to: flex items
Inherited: No
Media: visual
Computed value: as specified
Animatable: Yes
CSS Object Model Property: flexGrow

Syntax

flex-grow: number

Values

number: The flex grow factor, which describes the proportion by which the flex item will grow relative to the other flex items in the container. Negative numbers are invalid.

Examples

See flex examples for the use of this property in an example.

flex-grow: 3;

Usage

 The best practice is to use (instead of this property) the flex shorthand property, as it correctly resets any unspecified flex components to accomodate common uses.

Notes

This property is animatable only for values of 1 or greater.

Related specifications

CSS Flexible Box Layout Model: Candidate Recommendation