flex-grow

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;
}

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy

Contributors