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
Wrap the flex items in reverse order with CSS
Use the flex-wrap property with wrap-reverse value to wrap flex items in reverse order. This means that when flex items exceed the container's width and need to wrap, they will wrap in the opposite direction compared to the normal wrap behavior.
Syntax
selector {
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: #D35400;
flex-wrap: wrap-reverse;
width: 400px;
padding: 10px;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 20px;
width: 80px;
height: 40px;
margin: 5px;
border: 1px solid #333;
}
</style>
</head>
<body>
<h2>Flex Wrap Reverse Example</h2>
<div class="mycontainer">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>
</body>
</html>
Items 1, 2, 3, and 4 appear on the bottom row, while Items 5 and 6 wrap to the top row. The wrapping occurs in reverse order compared to normal flex-wrap behavior.
Conclusion
The flex-wrap: wrap-reverse property allows flex items to wrap in reverse order, making subsequent rows appear above previous rows instead of below them. This is useful for creating layouts where you want the overflow items to appear at the top.
Updated on: 2026-03-15T13:27:07+05:30
1K+ Views
Advertisements