Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style flexWrap Property
The HTML DOM Style flexWrap property is used for specifying how the elements inside the flex element are wrapped.
Following is the syntax for −
Setting the flexWrap property −
object.style.flexWrap = "nowrap|wrap|wrap-reverse|initial|inherit"
The above properties are explained as follows −
| Value | Description |
|---|---|
| nowrap | Thisis the default value specifying that the flexible items will notwrap. |
| wrap | Thisspecifies the flexible items will wrap if necessary. |
| wrap-reverse | Wrapsthe flexible items if necessary but in reverse order. |
| initial | Forsetting this property to initial value. |
| inherit | Toinherit the parent property value |
Let us look at an example for the flexWrap property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
margin: auto;
width: 180px;
height: 120px;
box-shadow: 0 0 0 5px brown;
display: flex;
flex-wrap: wrap;
}
#demo div {
padding: 0;
width: 50px;
height: 50px;
border: 5px solid;
border-radius: 15%;
}
#demo div:nth-child(even) {
border-color: black;
}
#demo div:nth-child(odd) {
border-color: red;
}
</style>
<script>
function changeFlexWrap() {
document.getElementById("demo").style.flexWrap="nowrap";
document.getElementById("Sample").innerHTML="The flex wrap property for the container div is set to no-wrap";
}
</script>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p>Change the above container flex wrap property by clicking the below button</p>
<button onclick="changeFlexWrap()">Change Flex Wrap</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Flex Wrap” button −
Updated on: 24-Oct-2019
39 Views
Advertisements