• Post category:CSS

How to Reverse Order Flex Items using CSS flex-direction?

CSS flex-direction Property

In this article, we will understand what happens if we set the CSS flex-direction property to ‘row-reverse’. It establishes the main axis which in turn besides how the flex-item is placed inside the flex-container. This property accepts four values, there are row, row-reverse, column, and column-reverse. Here, we will only see the usage of the value “row-reverse”. By setting the value of the flex-direction property, we can change how the items are placed. So, let’s take a look at an example:


<div id="container">
   <div class="item item-1">Item 1</div>
   <div class="item item-2">Item 2</div>
   <div class="item item-3">Item 3</div>
   <div class="item item-4">Item 4</div>
   <div class="item item-5">Item 5</div>


  border: 2px black solid;
  display: flex;
   width: 50px;
   padding: 1px;
   background-color: red;
   background-color: green;
   background-color: orange;
   background-color: darkviolet;
   background-color: yellow;


flex direction

  • In our above example, we have created a <div> flex container and inside it, we have created 5 <div> flex items. See the above code, the parent container is displayed inside the flex items.
  • By default, the flex-direction property is set to ‘row’. If we set the CSS flex-direction property to ‘row-reverse’ for the container, it will change the order from right to left.
      flex-direction: row-reverse; 



Learn: Flex shrink property in CSS

Leave a Reply