HTML | DOM Style flex Property
Last Updated :
08 Aug, 2022
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;">
GeeksforGeeks
</ h1 >
< h2 style="color: black;">
DOM Style flex Property
</ h2 >
< div id="gfg">
< div style="background-color:green;">Geeks
< div style="background-color:lightblue;">For
< div style="background-color:green;">
Geeks
</ div >
</ div >
</ div >
</ div >
< br >
< button onclick="GEEKS()">CLICK</ button >
< script >
function GEEKS() {
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;">
GeeksforGeeks
</ h1 >
< h2 style="color: black;">
DOM Style flex Property
</ h2 >
< div id="gfg">
< div style="background-color:green;">
Geeks1
</ div >
< div style="background-color:lightblue;">
For1
</ div >
< div style="background-color:green;">
GEEKS1
</ div >
</ div >
< br >
< button onclick="GEEKS()">CLICK</ button >
< script >
function GEEKS() {
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
Share your thoughts in the comments
Please Login to comment...