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