flex-grow

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jul 23, 2021Updated Sep 3, 2021
Contribute to Docs

A property that specifies how much space an item may occupy relative to the other items in the container. An item assigned a flex-grow value of 3, will stretch to occupy 3 times more space than an item assigned a value of 1.

Syntax

#element-container {
display: flex;
flex-grow: <flex-value>;
}

The <flex-value> should be an integer or decimal value. The default value is zero, which limits an item to the initial or default size regardless of the available space.

Example 1

Item three will stretch to occupy twice as much space as the other items:

#main-container {
margin: 2% 1% 0 1%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: stretch;
}
#item-1 {
display: flex;
flex-grow: 1;
}
#item-2 {
display: flex;
flex-grow: 1;
}
#item-3 {
display: flex;
flex-grow: 2;
}

All contributors

Looking to contribute?

Learn CSS on Codecademy