HTML | DOM Style flexGrow Property
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.
HTML
<!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 > Beginner < 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.
HTML
<!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 > Beginner < 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:
Supported Browsers: The browsers supported by DOM flexGrow property are listed below:
- Google Chrome 29 and above
- Edge 12 and above
- Internet Explorer 11 and above
- Firefox 20 and above
- Opera 12.1 and above
- Safari 9 and above