Reverse the Order of HTML Elements using CSS3 Flexbox

Do you know you can reverse the order of HTML elements using only CSS? Yes, it is possible and you do not need any script do this. CSS3 Flexbox Layout, also known as Flexible Layout module provides some very interesting properties, one of which can reverse the HTML elements order.

The Flexbox property that I am going to use in my example (to reverse the order of elements) is flex-direction. The values that you can use with this property are,

column
column-reverse
row (this is default)
row-reverse

For example,

<style>
    .myContainer
    {
        display: flex; 
        flex-direction: column-reverse; 
    }
</style>

Since I am interested in reversing the order of my HTML elements, I’ll focus on two values from the above list, that is, column-reverse and row-reverse.

I’ll use column-reverse when I want show reverse order vertically. I’ll use row-reverse when I want to show reverse order horizontally.

Now remember, it does not reverse the order based on numbers or alphabets. It will simply reverse the HTML elements order. Examples are necessary to understand this better.

The Markup

I have an HTML <table> listing birds in random order. It shows the list in a single row, horizontally. This is default.

<table>
    <tr>
        <td>Rock Pigeon</td>
        <td>Canyon Towhee</td>
        <td>Black Vulture</td>
        <td>Snail Kite</td>
        <td>Bald Eagle</td>
    </tr>
</table>

Using column-reverse with flex-direction

Now, I want to reverse the order (starting with Bald Eagle) and show the list vertically. I’ll use the property flex-direction with column-reverse.

<table>
    <tr style="display: flex; flex-direction: column-reverse;">
        <td>Rock Pigeon</td>
        <td>Canyon Towhee</td>
        <td>Black Vulture</td>
        <td>Snail Kite</td>
        <td>Bald Eagle</td>
    </tr>
</table>

Here’s the Output.

Rock PigeonCanyon TowheeBlack VultureSnail KiteBald Eagle

Note: I am using in-line CSS with the style attribute. You can create a CSS class and add it. The element becomes flexible by setting the display property as flex.

Using row-reverse with flex-direction

To show the reverse order horizontally, you’ll have to use the row-reverse value with the flex-direction property.

<style>
    .birds
    {
        display: flex;
        flex-direction: row-reverse;
    }
    .birds td 
    {
        margin: 5px 2px;
        width: auto;
        border: solid 1px #DDD;
    }
</style>
<table>
    <tr class="birds">
        <td>Rock Pigeon</td>
        <td>Canyon Towhee</td>
        <td>Black Vulture</td>
        <td>Snail Kite</td>
        <td>Bald Eagle</td>
    </tr>
</table>

Output

Showing elements in reverse order, horizontally.

Rock PigeonCanyon TowheeBlack VultureSnail KiteBald Eagle

I created the class to align the td’s.

You can apply the flex-direction property to other elements for similar results. Here’s an example using <ul> and <li> elements. Reverse the order of the list and show the output vertically.

<ul style="display: flex; flex-direction: column-reverse; padding: 0;">
    <li>Rock Pigeon</li>
    <li>Canyon Towhee</li>
    <li>Black Vulture</li>
    <li>Snail Kite</li>
    <li>Bald Eagle</li>
</ul>

For web developers, this property is very useful. It reduces design time to less than half. You must try other properties in the Flexbox module. Another interesting property from the list is the flex-wrap. I’ll share an interesting example about flex-wrap later in my blog. Thanks for reading.

Previous - Pure CSS3 Animation – How to Display an Animated Text Over a Faded Image on Hover



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!