Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Set whether the flexible items should wrap or not with JavaScript?
In this tutorial, we will learn how to control whether flexible items should wrap or not using JavaScript's flexWrap property.
The flexWrap property determines if flex items should wrap to new lines when there isn't enough space in the container. This is essential for creating responsive layouts.
Using the Style flexWrap Property
The flexWrap property defines whether flex items wrap within their container. The container must have display: flex for this property to work. The default value is nowrap.
Syntax
object.style.flexWrap = "nowrap|wrap|wrap-reverse|initial|inherit"
Values
nowrap ? Items will not wrap and display in a single line (default)
wrap ? Items will wrap to new lines when they overflow the container
wrap-reverse ? Items wrap to new lines in reverse order
initial ? Sets the property to its default value
inherit ? Inherits the property from the parent element
Return Value
Returns a string representing the current flexWrap property value.
Example 1: Comparing wrap and nowrap
This example demonstrates two flex containers with five items each. When you click the button, one container uses wrap to display items across multiple lines, while the other uses nowrap to keep items in a single line.
<html>
<head>
<style>
#flxWrpCont1,
#flxWrpCont2 {
width: 90px;
height: 90px;
border: 1px solid black;
display: flex;
}
#flxWrpEl {
width: 30px;
height: 30px;
}
#flxWrpCont1 div:nth-child(odd) {
background-color: skyblue;
}
#flxWrpCont2 div:nth-child(odd) {
background-color: grey;
}
</style>
</head>
<body>
<h2> Setting the item wrap value using the <i> flexWrap property </i>
</h2>
<br>
<b> Wrap </b>
<br><br>
<div id="flxWrpCont1">
<div id="flxWrpEl"> 1 </div>
<div id="flxWrpEl"> 2 </div>
<div id="flxWrpEl"> 3 </div>
<div id="flxWrpEl"> 4 </div>
<div id="flxWrpEl"> 5 </div>
</div>
<br>
<b> No Wrap </b>
<br><br>
<div id="flxWrpCont2">
<div id="flxWrpEl"> 1 </div>
<div id="flxWrpEl"> 2 </div>
<div id="flxWrpEl"> 3 </div>
<div id="flxWrpEl"> 4 </div>
<div id="flxWrpEl"> 5 </div>
</div>
<br><br>
<div id="flxWrpWrap">
<button onclick="setflexWrap()"> Set Flex Wrap </button>
</div>
<script>
function setflexWrap() {
var flxWrpWrap = document.getElementById("flxWrpWrap");
flxWrpWrap.style.display = "none";
var flxWrpCont1 = document.getElementById("flxWrpCont1");
var flxWrpCont2 = document.getElementById("flxWrpCont2");
flxWrpCont1.style.flexWrap = "wrap";
flxWrpCont2.style.flexWrap = "nowrap";
}
</script>
</body>
</html>
Example 2: Using wrap-reverse
This example shows how wrap-reverse wraps items to new lines but in reverse order. The rainbow-colored items (V-I-B-G-Y-O-R) will display with the wrapped lines appearing above the first line.
<html>
<head>
<style>
#flxWrpRevCont {
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
}
#flxWrpRevEl {
width: 100px;
height: 100px;
color: #ffff;
}
#flxWrpRevEl:nth-child(1) {
background-color: violet;
}
#flxWrpRevEl:nth-child(2) {
background-color: indigo;
}
#flxWrpRevEl:nth-child(3) {
background-color: blue;
}
#flxWrpRevEl:nth-child(4) {
background-color: green;
}
#flxWrpRevEl:nth-child(5) {
background-color: yellow;
color: #000000;
}
#flxWrpRevEl:nth-child(6) {
background-color: orange;
}
#flxWrpRevEl:nth-child(7) {
background-color: red;
}
</style>
</head>
<body>
<h2> Setting wrap-reverse using the <i> flexWrap property </i>
</h2>
<br><br>
<div id="flxWrpRevCont">
<div id="flxWrpRevEl"> V </div>
<div id="flxWrpRevEl"> I </div>
<div id="flxWrpRevEl"> B </div>
<div id="flxWrpRevEl"> G </div>
<div id="flxWrpRevEl"> Y </div>
<div id="flxWrpRevEl"> O </div>
<div id="flxWrpRevEl"> R </div>
</div>
<br><br>
<div id="flxWrpRevWrap">
<button onclick="setflexRevWrap()"> Apply Wrap Reverse </button>
</div>
<script>
function setflexRevWrap() {
var flxWrpRevCont = document.getElementById("flxWrpRevCont");
flxWrpRevCont.style.flexWrap = "wrap-reverse";
}
</script>
</body>
</html>
Comparison
| Value | Behavior | Use Case |
|---|---|---|
nowrap |
Items stay in single line | Fixed layouts, horizontal menus |
wrap |
Items wrap to new lines | Responsive grids, card layouts |
wrap-reverse |
Items wrap in reverse order | Special layout requirements |
Conclusion
The flexWrap property is essential for controlling how flex items behave when they exceed container width. Use wrap for responsive layouts and nowrap for fixed single-line displays.
228 Views
