Display Items in Reverse Order Using CSS Flexbox

css-flexbox

In this tutorial we will learn how to display HTML items (elements) in reverse order using CSS Flexbox.
Let’s assume we have the following HTML:

1
2
3
4
5
6
7
<div class="flex-container">
  <div class="flex-item">One</div>
  <div class="flex-item">Two</div>
  <div class="flex-item">Three</div>
  <div class="flex-item">Four</div>
  <div class="flex-item">Five</div>
</div>

How We want to display

We want to display items in reverse order and from left-to-right direction.

Five Four Three Two One

Solution

Add following CSS codes.

1
2
3
4
5
.flex-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

Explanation

flex-direction: row-reverse; will reverse the order of items. And justify-content: flex-end; will make the items to align from left-to-right.

I hope this small css trick was helpful and you liked it.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *