Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set how much the item will grow relative to the rest of JavaScript.
Use the flexGrow property to set how much the item will grow relative to the rest of the flexible items with JavaScript.
Syntax
element.style.flexGrow = "value";
Parameters
The flexGrow property accepts a numeric value that defines the growth factor:
- 0 - Item won't grow (default)
- 1 - Item grows equally with other flex items
- 2 or higher - Item grows proportionally more than others
Example
You can try to run the following code to learn how to work with flexGrow property:
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 1px solid #000000;
width: 250px;
height: 150px;
display: flex;
flex-flow: row wrap;
}
#box div {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 20px;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div id="box">
<div style="background-color:orange;">DIV1</div>
<div style="background-color:blue;">DIV2</div>
<div style="background-color:yellow;" id="myID">DIV3</div>
</div>
<p>Click the button to make DIV3 grow to fill available space</p>
<button onclick="display()">Set flexGrow</button>
<script>
function display() {
document.getElementById("myID").style.flexGrow = "2";
}
</script>
</body>
</html>
How It Works
The flexGrow property controls how flex items expand to fill available space:
- Initially, all divs have
flex-grow: 0and only take their base width (20px) - When you click the button, DIV3 gets
flex-grow: 2 - DIV3 then expands to fill the remaining space in the container
- If multiple items have flex-grow values, they share space proportionally
Common Use Cases
- Creating responsive layouts where certain elements expand to fill space
- Building navigation bars with flexible spacing
- Designing card layouts that adapt to container width
- Creating equal-width columns that grow together
Conclusion
The flexGrow property provides precise control over how flex items expand within their container. Use numeric values to define growth ratios and create responsive, flexible layouts.
Updated on: 2026-03-15T23:18:59+05:30
127 Views
Advertisements