Reverse Element Order with CSS Flexbox

By  on  

CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible.  Semantics and accessibility aside, I was recently hoping to find out if you could render elements in reverse order using only CSS, since in previous years we'd need to shift the DOM around

Let's assume we have the following HTML:

<ul">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
</ul>

Depending upon whether you'd like the elements to display vertically or horizontally, you'll change the value of flex-direction to reverse the order of elements:

/* show reverse by horizontal row */
.row-reverse { display: flex; flex-direction: row-reverse; }

/* show reverse by vertical column */
.column-reverse { display: flex; flex-direction: column-reverse; }

row-reverse displays the elements in reverse order horizontally, while column-reverse displays the elements in reverse order vertically.

I recently used this technique to overcome a frustrating problem with AngularJS, whereby I was iterating over an object's keys; there was no way to iterate over these keys in reverse order from the template, so I reversed the elements with CSS.  Not ideal but it did the job in the short term.

I remember when Flexbox was meant to change CSS in amazing ways, and while I don't think Flexbox's usage has changed the web world, I do think that we do have awesome tricks like this.  I hope to expand my Flexbox horizons but until then I'll continue sharing snippets like this!

Recent Features

  • By
    How to Create a RetroPie on Raspberry Pi &#8211; Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    JavaScript Battery API

    Mozilla Aurora 11 was recently released with a bevy of new features. One of those great new features is their initial implementation of the Battery Status API. This simple API provides you information about the battery's current charge level, its...

  • By
    CSS Custom Cursors

    Remember the Web 1.0 days where you had to customize your site in every way possible?  You abused the scrollbars in Internet Explorer, of course, but the most popular external service I can remember was CometCursor.  CometCursor let you create and use loads of custom cursors for...

Discussion

  1. One BIG issue with flexbox, grid and change item order is that, when you select text on page, you select it in source order.

    https://codepen.io/kartofelek007/pen/moyKwz

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!