The HTML DOM style flexGrow property is used as a measure to determine how much an item will grow relative to the rest of the flexible items inside the same container.
Syntax:
- Return flexGrow property:
object.style.flexGrow
- Set flexGrow property:
object.style.flexGrow = "number|initial|inherit"
Properties:
- number: It specifies the quantity in number which determines how much the item will grow relative to the rest of the flexible items.
- initial: It sets the flexGrow property to its default value.
- inherit: It inherits the property values from its parent element.
Return Value:
It returns a string, representing the flex-grow property of the element.
Example-1: Item grow relative to the rest of the flexible items inside the same container.
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style flexGrow Property </ title > < style > #main { width: 550px; height: 70px; border: 1px solid #c3c3c3; display: -webkit-flex; display: flex; } #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(1) { flex-grow: 1; } #main div:nth-of-type(2) { flex-grow: 1; } </ style > </ head > < body > < h1 > < center > Geeks < button onclick = "flex()" >Press </ button > </ center > </ h1 > < h4 > Clicking on the 'Press' button will showcase the'FlexGrow Property'. </ h4 > < div id = "main" > < div style = "background-color:white;" > </ div > < div style = "background-color:green;" id = "gfg" > </ div > </ div > < script > function flex() { // Access element and grow the item document.getElementById( "gfg").style.flexGrow = "1000"; } </ script > </ body > </ html > |
Output:
Before clicking on the button:
After clicking on the button:
Example 2: Item grow when “nth-of-type” is 4.
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style flexGrow Property </ title > < style > #main { width: 550px; height: 70px; border: 1px solid #c3c3c3; display: -webkit-flex; display: flex; } <!-- SAFARI --> #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; } #main div:nth-of-type(4) { -webkit-flex-grow: 1; } <!-- Chrome, Firefox, Opera, Edge --> #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; } #main div:nth-of-type(4) { flex-grow: 1; } </ style > </ head > < body > < h1 > < center > Geeks < button onclick = "flex()" >Press </ button > </ center > </ h1 > < h4 > Clicking on the 'Press' button will showcase the'FlexGrow Property'. </ h4 > < div id = "main" > < div style = "background-color:white;" ></ div > < div style = "background-color:green;" id = "gfg" ></ div > < div style = "background-color:white;" ></ div > < div style = "background-color:green;" id = "gfgg" ></ div > </ div > < script > function flex() { // SAFARI. document.getElementById( "gfg").style.WebkitFlexGrow = "8"; document.getElementById( "gfg").style.flexGrow = "8"; // OTHERS. document.getElementById( "gfgg").style.WebkitFlexGrow = "8"; document.getElementById( "gfgg").style.flexGrow = "8"; } </ script > </ body > </ html > |
Output:
Before clicking on the button:
After clicking on the button:
Browser Support: The browsers supported by DOM flexGrow property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari