DOM flexGrow property is used to determine whether the flexible items should wrap or not.
Syntax:
- Return flexWrap property:
object.style.flexWrap
- Set flexWrap property:
object.style.flexWrap = "nowrap|wrap|wrap-reverse| initial|inherit"
Properties:
- nowrap: It specifies that the flexible items will not wrap.
- wrap: It specifies that the flexible items will wrap if necessary.
- wrap-reverse: It specifies that the flexible items will wrap, if necessary, in reverse order.
- initial: It is used to set the property to its default value.
- inherit: It is used to inherit the property values from the parent element.
Return Value: It returns a string, representing the flex-wrap property of the element.
Example-1: Showing nowrap property
<!DOCTYPE html> < html >
< head >
< title >
HTML | DOM Style flexWrap Property
</ title >
</ head >
< body >
< center >
< h1 >Geeks
< button onclick="wrap()">
Press
</ button >
</ h1 >
</ center >
< h4 >
Clicking on the 'Press' button will set the
value of the flexWrap property to "nowrap".
</ h4 >
< style >
#main {
width: 150px;
height: 150px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
#main div {
width: 50px;
height: 50px;
}
</ style >
< div id="main">
< div style="background-color:green;">G</ div >
< div style="background-color:white;">E</ div >
< div style="background-color:green;">E</ div >
< div style="background-color:white;">K</ div >
< div style="background-color:green;">S</ div >
</ div >
< script >
function wrap() {
// SAFARI
document.getElementById(
"main").style.WebkitFlexWrap =
"nowrap";
// Other Standard Browsers
document.getElementById(
"main").style.flexWrap =
"nowrap";
}
</ script >
</ body >
</ html >
|
Output:
Before clicking on the button:
After clicking on the button:
Example-2: Showing wrap-reverse property
<!DOCTYPE html> < html >
< body >
< h1 >
< center >
Geeks < button onclick="wrap()">Press
</ button >
</ center >
</ h1 >
< h4 >Clicking on the 'Press' button will set the
value of the flexWrap property to "wrap-reverse".</ h4 >
< style >
#main {
width: 150px;
height: 150px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
#main div {
width: 50px;
height: 50px;
}
</ style >
< div id="main">
< div style="background-color:green;">G</ div >
< div style="background-color:white;">E</ div >
< div style="background-color:green;">E</ div >
< div style="background-color:white;">K</ div >
< div style="background-color:green;">S</ div >
</ div >
< script >
function wrap() {
// SAFARI
document.getElementById(
"main").style.WebkitFlexWrap =
"nowrap";
// Other Standard Browsers
document.getElementById(
"main").style.flexWrap =
"wrap-reverse";
}
</ script >
</ body >
</ html >
|
Output:
Before clicking on the button:
After clicking on the button:
Example-3: Showing initial property
<!DOCTYPE html> < html >
< head >
< title >
HTML | DOM Style flexWrap Property
</ title >
</ head >
< body >
< center >
< h1 >Geeks < button onclick="wrap()">Press
</ button ></ h1 >
</ center >
< h4 >Clicking on the 'Press' button will set the
value of the flexWrap property to "initial".</ h4 >
< style >
#main {
width: 150px;
height: 150px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
#main div {
width: 50px;
height: 50px;
}
</ style >
< div id="main">
< div style="background-color:green;">G</ div >
< div style="background-color:white;">E</ div >
< div style="background-color:green;">E</ div >
< div style="background-color:white;">K</ div >
< div style="background-color:green;">S</ div >
</ div >
< script >
function wrap() {
// SAFARI
document.getElementById(
"main").style.WebkitFlexWrap =
"nowrap";
// Other Standard Browsers
document.getElementById(
"main").style.flexWrap =
"initial";
}
</ script >
</ body >
</ html >
|
Output:
Before clicking on the button:
After clicking on the button:
Example-4: Showing inherit property
<!DOCTYPE html> < html >
< body >
< h1 >
< center >
Geeks < button onclick="wrap()">Press
</ button >
</ center >
</ h1 >
< h4 >Clicking on the 'Press' button will set
the value of the flexWrap property to "inherit".</ h4 >
< style >
#main {
width: 150px;
height: 150px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
#main div {
width: 50px;
height: 50px;
}
</ style >
< div id="main">
< div style="background-color:green;">G</ div >
< div style="background-color:white;">E</ div >
< div style="background-color:green;">E</ div >
< div style="background-color:white;">K</ div >
< div style="background-color:green;">S</ div >
</ div >
< script >
function wrap() {
// SAFARI
document.getElementById(
"main").style.WebkitFlexWrap =
"nowrap";
// Other Standard Browsers
document.getElementById(
"main").style.flexWrap =
"inherit";
}
</ script >
</ body >
</ html >
|
Output:
Before clicking on the button:
After clicking on the button:
Browser Support: The listed browsers support DOM flexWrap property:
- Google Chrome 29 and above
- Edge 12 and above
- Firefox 28 and above
- Internet Explorer 11.0 and above
- Opera 17 and above
- Safari 9 and above