Javascript examples for CSS Style Property:flexGrow
The flexGrow property sets how much the item will grow relative to the rest of the flexible items.
Value | Description |
---|---|
number | how much the item will grow relative to the rest of the flexible items. Default value is 0 |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |
Item | Value |
---|---|
Default Value: | 0 |
Return Value: | A String, representing the flex-grow property of an element |
CSS Version | CSS3 |
Let the blue DIV element grow five times wider than the rest of the flexible items:
<!DOCTYPE html> <html> <head> <style> #main {//from w w w .j a va 2s . co m width: 350px; height: 100px; border: 1px solid #c3c3c3; display: -webkit-flex; /* Safari */ display: flex; } /* Safari 6.1+ */ #main div:nth-of-type(1) {-webkit-flex-grow: 1;} #main div:nth-of-type(2) {-webkit-flex-grow: 1;} #main div:nth-of-type(3) {-webkit-flex-grow: 1;} /* Standard syntax */ #main div:nth-of-type(1) {flex-grow: 1;} #main div:nth-of-type(2) {flex-grow: 1;} #main div:nth-of-type(3) {flex-grow: 1;} </style> </head> <body> <div id="main"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;" id="myBlueDiv"></div> <div style="background-color:khaki;"></div> </div> <button onclick="myFunction()">Test</button> <script> function myFunction() { document.getElementById("myBlueDiv").style.WebkitFlexGrow = "5"; // Safari 6.1+ document.getElementById("myBlueDiv").style.flexGrow = "5"; } </script> </body> </html>