How do I use css flexbox to reverse the items within a container?

hoodedvul

CSS flexbox, Flexible Box. Is a way of arranging elements within a container in a responsive way. A responsive design adapts to various device screen sizes.

Starting with the following demo HTML/CSS code.

HTML. Create a container assign it two classes, one generic and the second unique to the element.

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

CSS.

...
 .container {
        margin-top: 50px;
        padding: 20px 0;
        background-color: brown;
        display: flex;
      }

      .item {
        padding: 30px;
        margin: 10px;
        background-color: burlywood;
        text-align: center;
        font-size: 30px;
      }
...

The result is:

To reverse the items use the container property flex-direction: row-reverse;

This reverses the items in a row from right to left.

The same can be done to reverse items in a column using flex-direction: column-reverse.

The result is: