CSS flex-grow property
The flex-grow property in CSS is used to define how a flex item should grow relative to other flex items within a flex container. It specifies the proportion of available space in the container that the item should take up, compared to other flex items. This property is part of the Flexbox layout model and helps manage how flex items grow to fill the container's space.
Basic Syntax
selector {
flex-grow: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 100%; /* Make the container take up the full width */
height: 100px; /* Set a height for demonstration purposes */
background-color: lightgray;
}
.item {
width: 100px;
height: 100%;
margin: 5px;
background-color: lightcoral;
border: 1px solid red;
}
.item-1 {
flex-grow: 1; /* This item will grow to fill available space */
}
.item-2 {
flex-grow: 2; /* This item will grow twice as much as item-1 */
}
.item-3 {
flex-grow: 3; /* This item will grow three times as much as item-1 */
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">Item 1</div>
<div class="item item-2">Item 2</div>
<div class="item item-3">Item 3</div>
</div>
</body>
</html>
In this example, the items within the flex container will grow according to their flex-grow values. Item 1 will grow by a proportion of 1, Item 2 will grow by a proportion of 2, and Item 3 will grow by a proportion of 3.
Values for flex-grow
1. 0 (default)
- Description: The flex item will not grow relative to the other items. It will only take up the space defined by its content and its
flex-basisvalue (if set). This is the default value forflex-grow. - Use Case: Use this value when you do not want the item to grow and only occupy the space based on its content.
.item {
flex-grow: 0; /* Do not allow the item to grow */
}
2. 1 or any positive number
- Description: The flex item will grow to fill the available space in the container. If all flex items have the same
flex-growvalue, they will grow equally. If they have different values, they will grow in proportion to their values. - Use Case: Use this value when you want the item to grow and fill the available space relative to other items.
.item {
flex-grow: 1; /* Allow the item to grow equally with other items */
}
3. 2, 3, etc. (positive numbers)
- Description: The flex item will grow to fill the available space in proportion to the value. For example, a value of
2means the item will grow twice as much as an item with a value of1. - Use Case: Use this value to set a proportional growth rate for the item compared to others.
.item {
flex-grow: 2; /* Allow the item to grow twice as much as items with flex-grow: 1 */
}
Practical Examples
Example 1: Equal Growth
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 100%;
height: 100px;
background-color: lightgray;
}
.item {
flex-grow: 1; /* All items will grow equally */
height: 100%;
margin: 5px;
background-color: lightcoral;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
In this example, all items grow equally to fill the container.
Example 2: Proportional Growth
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 100%;
height: 100px;
background-color: lightgray;
}
.item-1 {
flex-grow: 1; /* This item will grow by 1 unit */
height: 100%;
margin: 5px;
background-color: lightcoral;
border: 1px solid red;
}
.item-2 {
flex-grow: 2; /* This item will grow by 2 units */
height: 100%;
margin: 5px;
background-color: lightblue;
border: 1px solid blue;
}
.item-3 {
flex-grow: 3; /* This item will grow by 3 units */
height: 100%;
margin: 5px;
background-color: lightgreen;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="container">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
<div class="item-3">Item 3</div>
</div>
</body>
</html>
Here, the items grow in proportion to their flex-grow values: Item 1 grows by 1 unit, Item 2 by 2 units, and Item 3 by 3 units.