Part of the Flexbox Reading List

One of the most powerful features of is its ability to re-order page content with just a single line of CSS, a feature that previously was only achievable with JavaScript. This makes the flexbox layout module incredibly useful for responsive design, which is much more than “making things smaller”: mobile-first design often includes such features as re-prioritization of content to create different reading orders.

It also means that designers have an enhanced ability to easily re-order the elements they’ve crafted for a page. Unfortunately, the vast majority of flexbox support documentation is technical, and aimed towards developers. This series aims to correct that.

In previous entries I’ve talked about basic horizontal and vertical layout with flexbox. For this example, I’ll use the classical Roman order of columns: 

<ul id="roman-columns">
	<li><a href="#">Doric</a><img src="doric-column.png" alt>
	<li><a href="#">Ionic</a><img src="ionic-column.png" alt>
	<li><a href="#">Corinthian</a><img src="corinthian-column.png" alt>
</ul>

Displaying the columns in their order of development is the default for flexbox layout: 

ul#roman-columns {
	display: flex;
	padding: 0; 
}
ul#roman-columns li img { 
	width: 100%;
	height: auto; 
}
ul#roman-columns li a { 
	text-decoration: none;
	font-size: 1.5rem;
	color: #000;
	margin: 1rem; 
}

As I’ve shown previously, it’s easy to reverse this layout: 

ul { display: flex; flex-direction: row-reverse; }

Which creates:

It’s important to note that this change in order is not reflected in the DOM.

That’s neat and all, but not nearly as great as what comes next. Reverting the CSS to what we had originally, we add the following: 

ul li:last-child { order: -1; }

A negative order value will place an element at the start:

Whereas a positive value will place an element at the end: 

ul li:first-child { order: 1; }

Of course, order can be applied via any selector you wish: class, id, or pseudo-element.

The way order is applied can get confusing, as it would seem to make sense that a value like order: 1 would place the element first, not last. The easiest way to understand this rather counter-intuitive behaviour is to remember three points:

  • All flex items have a default order value of 0
  • By default, flex items will display in source order (i.e. the order the elements appear in the DOM).
  • If they are provided with an order value greater or less than 0, flex items are arranged relative to each other. Therefore the result of using both declarations above would be:
order: -1
order: 0
order: 1

So an element with order: -2 would be placed further “back” in the arrangement of flex items: in this case, on the extreme left.

Possibilities For Animation

According to the spec, order is an animatable property, meaning that it should be possible to create Isotope-like animations for flexbox elements as they swap position using CSS transitions. Unfortunately, I’m not aware of any browser that yet supports this feature.

Conclusion

While it is a little counter-intuitive at first, order is easy to grasp and apply, making the rearrangement of elements on a page with flexbox layout simple. As I’ll show in the next article, this feature is particularly useful in responsive design.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/HwdCf