CSS Flexbox #7. The order Property

If you want to place flex-items in a particular sequence inside their flex-container, independently of how they are placed in the HTML code, you use the CSS Flexbox order property.

As you already learned in the first tutorial of this series, you can invert the order of the flex-items using row-reverse on the inline axis. This is useful when using right-to-left languages like Urdu or Hebrew.

It is also possible to invert the order of flex-items on the block axis using flex-direction: column-reverse.

The order property gives you much more flexibility because it allows you to visually change the order of each item and still keep the source order in the markup (HTML code). This is very useful for people, who use screen readers (accessibility is important).

Let’s take a look at an example.

Step # 1. Create the HTML

• Open your preferred code editor.
• Create an empty HTML file.
• Visit this page, copy the HTML code and save the file.

Step # 2. – Create the CSS

We have a container with five elements, each one of these is numbered in a logical order in the HTML markup. Let’s add some basic styling.

• Create an empty CSS file and call it style.css (this file is already linked in the HTML code)
• Copy and paste this code:

/* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

Step # 3. – The CSS Flexbox Styles

• Edit the CSS code in order to declare the container as a flex-container:

.container { display: flex; background-color: #f5ca3c; }

The default value for the order property is 0.

• Edit the CSS code:

 .item2 { order: 0; }

As you can see, the layout remains unchanged.

That means that if you assign an item an order value greater than 0, it will place itself at the end (farther away according to the flex-direction).

• Edit the CSS code:

.item2 { order: 1; }

The same way, if you assign an item an order value less than 0, it will place itself at the beginning (nearer according to the flex-direction).

• Edit the CSS code:

 .item4 { order: -1; }

Items 1, 3 and 5 have a default order value of 0, so they appear next to each other, taking into account their order in the source code (HTML). Despite the visual appearance of the layout, a screen reader will start with item1, because that is the order in the HTML markup.

On the Block Axis

In order to see how this property works on the block axis, just add the flex-direction property with the value column to the flex-container.

• Edit the CSS code:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

The order property allows you to change the visual order of flex-items, without the need of changing the order of them in the HTML markup. That way, you can preserve the logical sense of your site in accessibility terms and still have the freedom to arrange the layout of your site according to your particular needs.

Hint: You can use the order property with CSS Grid elements in the same manner as with flex-items. Thanks for reading!

Previous tutorials of this series

• CSS Flexbox #1. Creating Your First Flexbox Layout
• CSS Flexbox #2. How to Use the justify-content Property
• CSS Flexbox #3. The align-items Property
• CSS Flexbox #4. The flex-grow Property
• CSS Flexbox #5. The flex-shrink Property
• CSS Flexbox #6. The flex-basis Property