The flex-grow property is an essential part of the CSS Flexbox layout module, allowing elements to grow and fill available space within a flex container. Here's a detailed explanation, along with a practical example for better understanding:
What is flex-grow?
Definition: The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items inside the same container. If space is available, items with higher flex-grow values will expand more compared to those with lower values.
Default Value: The default value for flex-grow is 0, meaning the item will not grow at all.
Syntax: flex-grow: <number>;
The number represents a proportion. If all flex items have the same flex-grow value, they will grow equally. If one has a higher value, it will take more space relative to others.
How flex-grow Works?
Imagine you have a flex container with three items:
1. Each item starts with a base width or size.
2. The container has some additional free space.
3. The flex-grow property determines how that free space is distributed among the items.
flex-grow.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Grow Example</title>
<style>
.container {
display: flex;
width: 90vw;
height: 100px;
background-color: #f0f0f0;
margin: 20px;
}
.item {
background-color: #8e44ad;
color: white;
text-align: center;
line-height: 100px;
margin: 5px;
flex-grow: 1; /* Default flex-grow value */
width: 100px;
}
.item-2 {
flex-grow: 3; /* This item will grow twice as much as the others */
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item item-2">2</div>
<div class="item">3</div>
</div>
</body>
</html>
Just increase and decrease the size of the window to understand the behavior better.
No comments:
Post a Comment