HTML | DOM Style flex Property
The HTML DOM Style flex property sets/returns the length of the item, relative to rest of flexible items inside the same container. The flexGrow, flexShrink, and the flexBasis are the properties of Flex property.
Syntax:
- It is used to return the style flex property:
object.style.flex
- It is used to set the flex property:
object.style.flex = "flex-grow flex-shrink flex-basis|auto| initial|inherit"
Return Values: It returns a string value, which represents the flex property of an element
Property values:
Value | Description |
---|---|
flex-grow | It specify how much the item will grow relative to the rest of the flexible items |
flex-shrink | It specify how much the item will shrink relative to the rest of the flexible items |
flex-basis | It specify the length of the item. Legal values: “auto”, “inherit” and number followed by “%”, “px”, “em” |
auto | Same as 1 1 auto |
initial | Same as 0 1 auto |
inherit | Inherit the property from it’s parent element. |
Example-1: Same length of all div.
html
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style flex Property </ title > < style > #gfg { width: 220px; height: 60px; border: 1px solid black; display: -webkit-flex; /* Safari */ display: flex; } </ style > </ head > < body > < center > < h1 style="color: green;"> w3wiki </ h1 > < h2 style="color: black;"> DOM Style flex Property </ h2 > < div id="gfg"> < div style="background-color:green;">Beginner < div style="background-color:lightblue;">For < div style="background-color:green;"> Beginner </ div > </ div > </ div > </ div > < br > < button onclick="Beginner()">CLICK</ button > < script > function Beginner() { var x = document.getElementById("gfg"); var y = x.getElementsByTagName("DIV"); var i = 0; for (i; i < y.length ; i++) { // IE10 y[i].style.msFlex = "1"; // Safari 6.1+ y[i].style.WebkitFlex = "1"; y[i].style.flex = "1"; } } </script> </ center > </ body > </ html > |
Output:
Before Click on the Button:
After Click on the Button:
Example-2: Flex items according to its content:
html
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style flex Property </ title > < style > #gfg { width: 220px; height: 300px; border: 1px solid black; display: -webkit-flex; /* Safari */ display: flex; } </ style > </ head > < body > < center > < h1 style="color: green;"> w3wiki </ h1 > < h2 style="color: black;"> DOM Style flex Property </ h2 > < div id="gfg"> < div style="background-color:green;"> Beginner1 </ div > < div style="background-color:lightblue;"> For1 </ div > < div style="background-color:green;"> Beginner1 </ div > </ div > < br > < button onclick="Beginner()">CLICK</ button > < script > function Beginner() { var x = document.getElementById("gfg"); var y = x.getElementsByTagName("DIV"); var i = 0; for (i; i < y.length ; i++) { // IE10 y[i].style.msFlex = "0"; // Safari 6.1+ y[i].style.WebkitFlex = "0"; y[i].style.flex = "1 125px"; } } </script> </ center > </ body > </ html > |
Output:
Before Click on the Button:
After Click on the Button:
Supported Browsers: The browser supported by DOM Style flex property are listed below:
- Google Chrome 29 and above
- Edge 12 and above
- Internet Explorer 11.0 and above
- Firefox 20.0 and above
- Opera 12.1 and above
- Apple Safari 9.0 and above
Contact Us