Flex Grow in CSS
It sets the flex grow factor of a flex item, which means how much the object will grow compared to other objects within the container specified by the flex-grow attribute. In simple terms, the flex-grow property represents an object's capacity to grow concerning other objects kept in the same container.
For example, if we set flex-grow to 1 for all items, each item will be equal in the container. But if we give any of the items a value of 2, then the corresponding item will take up space twice as the others.
The additional space is shared into several flex objects when the original size of the flex container is bigger than the total of the combined original size of the flex objects. Each object's growth is estimated as a proportion of the total amount of the flex growth factors for all the objects in the container.
This CSS property is used to increase the size of the flex item. It only works on the flex-items. Therefore, the flex-grow property won't impact the flex object if the container's object is not a flex object, as it only works on flex objects.
Generally, this CSS property is used with the other flex properties that are flex-shrink and flex-basis and is usually defined by the flex shorthand to ensure that all values are set.
Syntax:
flex-grow: number| initial | inherit;
Values:
- Number: It is the positive number that determines the flex-grow factor. Its default value is 0 and does not allow a negative value. When it is set to zero, the item will not grow, even if space is available. The element will take the space it requires.
- Initial: It sets this property to its default value.
- Inherit: It inherits this property from its parent element.
Let's understand the property with the example:
Example using of number value:
HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>flax grow</title>
<link rel="stylesheet" href="flex_grow.css">
</head>
<body>
<div id="container">
<div class="item" id="item-1" > item-1 </div>
<div class="item" id="item-2" > item-2 </div>
<div class="item" id="item-3" > item-3 </div>
<div class="item" id="item-4" > item-4 </div>
<div class="item" id="item-5" > item-5 </div>
<div class="item" id="item-6" > item-6 </div>
</div>
</body>
</html>
CSS file:
.body{
margin: 0;
}
#container {
border: 6px solid black;
display: flex;
}
.item {
color: white;
text-align: center;
font-size: 1.5rem;
padding: 1rem;
}
#item-1 {
background-color: rgb(0, 26, 255);
}
#item-2 {
background-color: rgb(255, 115, 0);
}
#item-3 {
background-color: rgb(217, 255, 0);
}
#item-4 {
background-color: rgb(15, 128, 0);
}
#item-5 {
background-color: rgb(128, 0, 53);
}
#item-6 {
background-color: rgba(107, 0, 128, 0.507);
}
Output:
By default, you can see a lot of extra space inside the container, as the flex item only occupies the space sufficient to fit the content. Sometimes, though, you don't want the additional whitespace. Instead, you want the flex items to grow to occupy the remaining space. Every flex item has a flex-grow value of 0 by default, so they don't take up the extra space. Let's take that for one of the items and see what happens.
When we set flex-grow to zero, to begin with, for item 5
CSS file:
.body{
margin: 0;
}
#container {
border: 6px solid black;
display: flex;
}
.item {
color: white;
text-align: center;
font-size: 1.5rem;
padding: 1rem;
}
#item-1 {
background-color: rgb(0, 26, 255);
}
#item-2 {
background-color: rgb(255, 115, 0);
}
#item-3 {
background-color: rgb(217, 255, 0);
}
#item-4 {
background-color: rgb(15, 128, 0);
}
#item-5 {
background-color: rgb(128, 0, 53);
flex-grow: 0;
}
#item-6 {
background-color: rgba(107, 0, 128, 0.507);
}
When we change the value to one
CSS file:
.body{
margin: 0;
}
#container {
border: 6px solid black;
display: flex;
}
.item {
color: white;
text-align: center;
font-size: 1.5rem;
padding: 1rem;
}
#item-1 {
background-color: rgb(0, 26, 255);
}
#item-2 {
background-color: rgb(255, 115, 0);
}
#item-3 {
background-color: rgb(217, 255, 0);
}
#item-4 {
background-color: rgb(15, 128, 0);
}
#item-5 {
background-color: rgb(128, 0, 53);
flex-grow: 1;
}
#item-6 {
background-color: rgba(107, 0, 128, 0.507);
}
Output:
You can see that item 5 now grows to take up all the remaining space in the container.
Let's add the property to item 6. Item 6 flex grows one now.
CSS file:
.body{
margin: 0;
}
#container {
border: 6px solid black;
display: flex;
}
.item {
color: white;
text-align: center;
font-size: 1.5rem;
padding: 1rem;
}
#item-1 {
background-color: rgb(0, 26, 255);
}
#item-2 {
background-color: rgb(255, 115, 0);
}
#item-3 {
background-color: rgb(217, 255, 0);
}
#item-4 {
background-color: rgb(15, 128, 0);
}
#item-5 {
background-color: rgb(128, 0, 53);
flex-grow: 1;
}
#item-6 {
background-color: rgba(107, 0, 128, 0.507);
flex-grow: 1;
}
Output:
If you look at the output, the additional space has been evenly distributed between flex item 5 and item 6. If there were 100 pixels available, item 5 would grow by an extra 50 pixels, and item 6 would grow by an additional 50 pixels.
Now, when I change the value of item 6 to 3 from one
CSS file:
.body{
margin: 0;
}
#container {
border: 6px solid black;
display: flex;
}
.item {
color: white;
text-align: center;
font-size: 1.5rem;
padding: 1rem;
}
#item-1 {
background-color: rgb(0, 26, 255);
}
#item-2 {
background-color: rgb(255, 115, 0);
}
#item-3 {
background-color: rgb(217, 255, 0);
}
#item-4 {
background-color: rgb(15, 128, 0);
}
#item-5 {
background-color: rgb(128, 0, 53);
flex-grow: 1;
}
#item-6 {
background-color: rgba(107, 0, 128, 0.507);
flex-grow: 3;
}
Output:
Both item-5 and item-6 grow, but item-6 takes up the extra space three times as much as item-5. Remember, the flex growth factor is relative. If item 5 grows by 25 pixels, item 6 has to be three times that value. Hence, it grows by 75 pixels, and you can specify decimal values, which works fine.
Now, when we set the flex-grow value to one for all items
CSS file:
.body{
margin: 0;
}
#container {
border: 6px solid black;
display: flex;
}
.item {
color: white;
text-align: center;
font-size: 1.5rem;
padding: 1rem;
}
#item-1 {
background-color: rgb(0, 26, 255);
flex-grow: 1;
}
#item-2 {
background-color: rgb(255, 115, 0);
flex-grow: 1;
}
#item-3 {
background-color: rgb(217, 255, 0);
flex-grow: 1;
}
#item-4 {
background-color: rgb(15, 128, 0);
flex-grow: 1;
}
#item-5 {
background-color: rgb(128, 0, 53);
flex-grow: 1;
}
#item-6 {
background-color: rgba(107, 0, 128, 0.507);
flex-grow: 1;
}
Output:
You can see that all items grow evenly to take up the leftover space. There is no more additional space at the end of the container.
Example using initial value:
HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>flax grow</title>
<link rel="stylesheet" href="flex_grow.css">
</head>
<body>
<div id="container">
<div class="item" id="item-1" > item-1 </div>
<div class="item" id="item-2" > item-2 </div>
<div class="item" id="item-3" > item-3 </div>
<div class="item" id="item-4" > item-4 </div>
<div class="item" id="item-5" > item-5 </div>
<div class="item" id="item-6" > item-6 </div>
</div>
</body>
</html>
CSS file:
.body{
margin: 0;
}
#container {
border: 6px solid black;
display: flex;
}
.item {
color: white;
text-align: center;
font-size: 1.5rem;
padding: 1rem;
flex-grow: 1;
}
#item-1 {
background-color: rgb(0, 26, 255);
}
#item-2 {
background-color: rgb(255, 115, 0);
}
#item-3 {
background-color: rgb(217, 255, 0);
flex-grow: initial;
}
#item-4 {
background-color: rgb(15, 128, 0);
}
#item-5 {
background-color: rgb(128, 0, 53);
}
#item-6 {
background-color: rgba(107, 0, 128, 0.507);
}
Output:
If you look at the output, the additional space has been evenly distributed among all items instead of item 3.
Example using inherit value:
HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>flax grow</title>
<link rel="stylesheet" href="flex_grow.css">
</head>
<body>
<div id="container">
<div class="item" id="item-1"> item-1
<div class="item" id="child-item-1">child-item-1</div>
</div>
<div class="item" id="item-2">item-2</div>
<div class="item" id="item-3">item-3</div>
<div class="item" id="item-4">item-4</div>
<div class="item" id="item-5">item-5</div>
<div class="item" id="item-6">item-6</div>
</div>
</body>
</html>
CSS file:
.body{
margin: 0;
}
#container {
border: 6px solid black;
display: flex;
}
.item {
color: white;
text-align: center;
font-size: 1.5rem;
padding: 1rem;
}
#item-1 {
background-color: rgb(0, 26, 255);
flex-grow: 1;
}
#child-item-1 {
background-color: rgb(255, 115, 0);
flex-grow: inherit;
}
#item-2 {
background-color: rgb(255, 0, 221);
flex-grow: 0;
}
#item-3 {
background-color: rgb(217, 255, 0);
flex-grow: 0;
}
#item-4 {
background-color: rgb(15, 128, 0);
flex-grow: 3;
}
#item-5 {
background-color: rgb(128, 0, 53);
}
#item-6 {
background-color: rgba(107, 0, 128, 0.507);
}
Output:
Here, you can see that child-item-1 inherited item-1 property.
Some Properties of Flex-grow
- Dictate what amount of the available space inside the flex container the item should take up.
- Relative to other items in the container.
- The default value is Zero - items do not grow.
- Flex-grow value of 1 - flex item grows evenly.