The flex-grow CSS property defines how much an element grows relative to other flexible items inside the same parent element. It determines how much space to allocate to an item in a flex parent when the available space exceeds the combined size of all the items.

The command "flex-grow: <number>" specifies the proportion of growth. The value must be positive — the higher the number, the more it grows. 

For example, if all items have a value of 1, they'll grow equally to fill the parent element's available space. But if child element A has a value of 2, while the others have a value of 1, it will occupy twice as much space as its siblings. Here’s what the code looks like:

.container {

  display: flex;


.item {

  flex-grow: 1;


.item-2 {

  flex-grow: 2;


Flex-grow gives designers more flexibility over space, organization, and appearance, enabling various layouts and items to adapt to different devices and screen sizes.

Visit Webflow University for in-depth tutorials on flexbox and all things CSS to customize your website.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more