1. css
  2. /properties
  3. /flex-grow

flex-grow

Definition

The flex-grow property in CSS defines the ability of a flex item to grow and take up unused space within a flex container.

Examples

Set the flex-grow property to 1 (the default value):

.flex-item {
  flex-grow: 1;
}

Set the flex-grow property to 2:

.flex-item {
  flex-grow: 2;
}

Set the flex-grow property to 0:

.flex-item {
  flex-grow: 0;
}

Values

ValueDescription
<number>A non-negative number that defines the ability of a flex item to grow and take up unused space within a flex container. The default value is 1. A value of 0 means the flex item will not grow.
initialUse the default value defined by the browser.
inheritUse the value of the parent element.

Best Practices

  • Consider using the flex-grow property in conjunction with other flexbox properties such as flex-shrink and flex-basis to control the size of flex items.
  • Make sure to provide a meaningful fallback for browsers that do not support the flex-grow property.
  • Keep in mind that the value of flex-grow affects the size of flex items along the main axis of the flex container.
  • Use the flex-grow property in combination with media queries to create responsive designs that adjust to different screen sizes.
  • Be mindful of the relationship between flex-grow and other flexbox properties like flex-basis and flex-shrink.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes