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
Set the flex items horizontally from right to left with CSS
Use the flex-direction property with row-reverse value to set the flex items horizontally from right to left. This property reverses the order of flex items while maintaining horizontal alignment.
Syntax
selector {
display: flex;
flex-direction: row-reverse;
}
Example
You can try to run the following code to implement the row-reverse value −
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
flex-direction: row-reverse;
background-color: orange;
padding: 10px;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class="mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
<div>Q5</div>
<div>Q6</div>
</div>
</body>
</html>
The output of the above code is −
A heading "Quiz" followed by an orange container with six white boxes labeled Q1 through Q6. The boxes appear in reverse order from right to left (Q6, Q5, Q4, Q3, Q2, Q1) due to the flex-direction: row-reverse property.
Conclusion
The flex-direction: row-reverse property is useful for reversing the horizontal order of flex items while maintaining their horizontal layout. This creates a right-to-left arrangement without changing the HTML structure.
Updated on: 2026-03-15T13:22:24+05:30
250 Views
Advertisements