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:

HTML:

<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>
</div>

CSS:

#container{
  border: 2px black solid;
  display: flex;
}
.item{
   width: 50px;
   padding: 1px;
}
.item-1{
   background-color: red;
}
.item-2{
   background-color: green;
}
.item-3{
   background-color: orange;
}
.item-4{
   background-color: darkviolet;
}
.item-5{
   background-color: yellow;
}

Output:

• 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.

  #container{
    flex-direction: row-reverse; 
  }

Output:

Learn: Flex shrink property in CSS