Changing the order of Flexbox items
Tags: css, flexbox, webdev, codenewbie
Published: 2020-07-06 22:28:54

---
title: Changing the order of Flexbox items
published: true
date: 2020-06-11 20:15:24 UTC
tags: CSS,flexbox,webdevelopment,codenewbie
canonical_url: https://corysblog.dev/2020/06/11/changing-the-order-of-flexbox-items/
---

A few months back, while I was learning all about flexbox, I came across the `order `property. I haven’t been able to stop thinking about how cool this is and told myself if I ever start a blog, I need to talk about `display:flexbox` and the `order` property. So here we are!

There are multiple ways in which to take advantage of using the `order` property, but I’m just going to give the example of one use. Let’s say you have a section with your `<img>` followed by a `<h1>` and a few `<p>`. But by having your `<img>` first in your HTML markup, it makes it confusing for those using assistive devices, such as a screen reader. Your `<img>` will be read first by the screen reader and then your `<h1>`, and so on. The screen reader is going to describe an image to our viewer first without really having a context to what the website is all about. Wouldn’t it make much more sense to have the `<h1>` read first?

“But I want the image to be the first thing in the layout” you may say. This is the perfect opportunity to use our `order` property! Let’s take a look at this below;

![](https://corysblogdev.files.wordpress.com/2020/06/image-5.png?w=1024)

We make a `<div>` which will be our “parent”. Then we have a `<h1>`, three `<p>`, and an `<img>`, which will all be “children” of the “parent” div.

Now, in our CSS file, if we set our `<div>` to the code below, nothing is going change in our layout. The HTML will still flow from top to bottom like we wrote it, but we have turned all the “children” into “flex items”.

![](https://corysblogdev.files.wordpress.com/2020/06/image-3.png?w=722)

At this point we can now “re-order” the flow of our HTML without needing to change the order it’s written in, thus enabling us to keep our accessibility.

We want to have the `<img>` shown first in our layout. Within our CSS file we can give each “flex item” a number and tell it how to “re-order” (1, 2, 3, 4, 5), but for that to work you **MUST** assign each “child” to have an order number;

![](https://corysblogdev.files.wordpress.com/2020/06/image-4.png?w=565)

This is a bit verbose for what we’re trying to do. We just want our `<img>` to be first and we aren’t needing to reorder the other children. So we can assign a value of “-1” to the `order` property which will place this “child” first without needing to give an `order` to the other flex items;

![](https://corysblogdev.files.wordpress.com/2020/06/image-6.png?w=554)

Here’s a codepen to better visualize and play around with.

<iframe title="Flexbox Order" id="cp_embed_YzymqWj" src="https://codepen.io/CoryRunn/embed/preview/YzymqWj?height=300&amp;slug-hash=YzymqWj&amp;default-tabs=html,result&amp;host=https://codepen.io" scrolling="no" frameborder="0" height="300" allowtransparency="true" style="width: 100%; overflow: hidden;"></iframe>

All in all, this is a pretty simple tool to use. For some weird reason my brain finds this magical and I wanted to share!

(p.s. I believe you can use the `order` property with `display:grid;` as well. I have yet to dig into Grid, as I’m having too much fun with Flexbox!)