CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Avoiding chaos when using Flexbox 'order'

A recent Twitter flurry provoked me to finally build a Flexbox demo I've been meaning to create since I first started playing around with CSS flex properties.

Roma Komarov posted an exploration of using CSS Flexbox and the order property to create a CSS-only table sorting effect. Some other CSS mavens quickly warned that this was not recommended practice, and was even directly contrary to the spec.

Roma acknowledged the criticism and added a warning to the blog post: just an experiment, don't use in production! But in the Twitter discussion, a few people asked a question that has come up again and again:

What is `order` supposed to be for, then? If its use case is “visual order differs from source” why can’t that be true in other media?

Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.

It's pretty rare for CSS specs to order web authors around. Most of their "musts" are reserved for browser developers. So you know that this order about order is serious business. Keyboard users and screen reader users rely on a consistent order of elements in the DOM, and keyboard or assistive tech users who can see the screen need that order to match the logical order of the elements they see.

Yes, floated layout columns also allowed you (or sometimes forced you) to use source order that didn't match up nicely with the visual order. But that's why we're trying to get away from using floats for layout! Flexbox & CSS grid are supposed to make it easier to use a sensible markup structure—not make it easier to pretend that markup structure doesn't matter.

If you want to reorder the DOM, use DOM methods to move elements around, not CSS methods that only affect layout.

So why does order exist? Why have an order property in CSS, if you're not supposed to use CSS to reorder content?

Because sometimes the logical order of a layout cannot be described by Flexbox's normal flow options of left-to-right, right-to-left, top-to-bottom, and bottom-to-top. The order property is for these cases: to create a visual ordering that does match the logical order, for the design that you're using.

Or in the slightly more elegant words of Flexbox spec editor Elika Etemad (AKA fantasai):

Visual perception doesn't follow coordinate system order. It's affected by things like the gestalt principles, and it has a simultaneity that e.g. speech cannot represent. So we order the source by reading order, and allow visual layout more freedom to move elements around.

The Olympic podium in this pen is my favourite example of an unusual layout order that is nonetheless universally recognized. This is the demo that I've been meaning to make for two years. (Convenient that I finally got to it during the Olympics!)

The height of the elements—and cultural familiarity with the podium structure—communicates the rankings, not left-to-right reading order. The source order matches the logical 1, 2, 3 order of the rankings, but the order property creates the correct layout.

When written as a single list, that's the logical order. But the logical layout is to have "previous" on the far left and "next" on the far right, with the table of contents link in between. Flexbox lets me do that without fussing with floats and extra wrapper divs.

The order adjustment on that site is applied in a min-width media query. On narrower screens, the table of contents link takes up the full first row of the Flexbox layout, and the next/previous wrap to a separate row (or two rows, if the screen is very narrow relative to the font size).

Similarly, I have a max-width media query in my podium pen to remove order on narrow screens (among other style tweaks) and revert to the normal order of the list for a single-column layout.

Thanks for this explanation. I tend to use order when creating media elements, like when you have a photo next to a block of text. I might want the source order to have the text first, but when the item flexes I want the image to the left for a conventional visual style. Outside of that, I'm not sure I use order much. But it does make that operation a lot easier than the old methods.

Good point, @brianhaferkamp. I've done that, too: put the image after the text in the source, but on the left in the layout.

If you only have two flex items, you can do it with flex-direction: row-reverse on the flex container, but order works just as well. (And order doesn't change the flex-start and flex-end values for alignment.)

We're all for progressive enhancement, but CodePen is a bit unique in that it's all about writing and showing front end code, including JavaScript. It's required to use most of the features of CodePen.