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
Selected Reading
Role of CSS flex-wrap property wrap-reverse value
The CSS flex-wrap property with wrap-reverse value allows flex items to wrap to new lines in reverse order. When flex items exceed the container width, they wrap from bottom to top instead of the default top to bottom behavior.
Syntax
.container {
display: flex;
flex-wrap: wrap-reverse;
}
Example
The following example demonstrates how wrap-reverse wraps flex items in reverse order −
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
flex-wrap: wrap-reverse;
width: 400px;
padding: 10px;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
border: 1px solid #333;
}
</style>
</head>
<body>
<h3>Flex Wrap Reverse Example</h3>
<div class="mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
<div>Q5</div>
<div>Q6</div>
<div>Q7</div>
<div>Q8</div>
<div>Q9</div>
</div>
</body>
</html>
An orange container displays flex items Q1-Q9 as white boxes. When items exceed the container width, they wrap to new lines with the last wrapped line appearing at the top instead of bottom, creating a reverse stacking effect.
Conclusion
The wrap-reverse value is useful when you need flex items to wrap in reverse order, with new lines stacking from bottom to top. This creates a unique layout effect for specific design requirements.
Updated on: 2026-03-15T12:54:36+05:30
246 Views
Advertisements