
The CSS flex-grow property defines how much the item will grow relative to the rest of the flexible items inside the same container.
Syntax:
flex-grow: number;
number – A number defining how much the item will grow relative to the rest of the flexible items. The default value is 0.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#box-container {
width: 300px;
height: 100px;
border: 3px solid #333;
display: flex;
}
#box-container div:nth-of-type(1) {flex-grow: 1;}
#box-container div:nth-of-type(2) {flex-grow: 3;}
#box-container div:nth-of-type(3) {flex-grow: 1;}
#box-container div:nth-of-type(4) {flex-grow: 1;}
#box-container div:nth-of-type(5) {flex-grow: 2;}
</style>
</head>
<body>
<div id="box-container">
<div style="background-color:#264653;"></div>
<div style="background-color:#2a9d8f;"></div>
<div style="background-color:#e9c46a;"></div>
<div style="background-color:#f4a261;"></div>
<div style="background-color:#e76f51;"></div>
</div>
</body>
</html>
Output:
Note: Internet Explorer 10 and earlier versions do not support the flex-grow property!
Enjoy coding!
Read also: