CSS Flex-grow property
The flex-grow CSS property defines how the flex item will grow relative to the other items inside the CSS flex container.
Syntax:
flex-grow: number | initial | inherit
number: A positive number determines the flex-grow factor of the flex item. The default value is 0. Negative numbers are invalid.
initial: Its default value.
inherit: Its parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: -webkit-flex;
display: flex;
background-color: red;
}
.flex-item {
background-color: pink;
text-align: center;
font-size: 25px;
width: 100px;
height: 100px;
padding-top: 20px;
margin: 5px;
}
</style>
</head>
<body>
<h1> flex-grow: 0; </h1>
<div class="container">
<div class="flex-item" style = "flex-grow: 0;"> flex-item 1 </div>
<div class="flex-item" style = "flex-grow: 0;"> flex-item 2 </div>
<div class="flex-item" style = "flex-grow: 0;"> flex-item 3 </div>
</div>
<h1> flex-grow: 1; </h1>
<div class="container">
<div class="flex-item" style = "flex-grow: 1;"> flex-item 1 </div>
<div class="flex-item" style = "flex-grow: 1;"> flex-item 2 </div>
<div class="flex-item" style = "flex-grow: 1;"> flex-item 3 </div>
</div>
</div>
</body>
</html>
OUTPUT:
