🤑 Join the Treehouse affiliate program and earn 25% commission!

✨ No-code curious? Check out 4 new FREE Adalo courses and start building an app in minutes — no code required!

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

Well done!

You have completed CSS Flexbox Layout!

Sign up for Treehouse Back to Library

Preview

Sign up for Treehouse Continue

Changing the Order of Flex Items

5:32 with Guil Hernandez

By default, flex items are laid out in the order they appear in the source code. We can use the `order` property to change the order of any flex item.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Resources

Video review

The order property applies to flex items only.
We can use the order property to change the order of any flex item.
You can structure an HTML document for SEO or accessibility first, then rearrange the content without ever editing the HTML.
The default order of all flex items is 0.
order places flex items relative to the other items' order values.
To place a flex item before another item, it needs to have a lower order value than the item.
To place a flex item after another item, it needs to have a higher order value than the item.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

By default, flex items are laid out in the order they appear in the source code. 0:00

But we can use the order property to change the order of any flex item. 0:05

For example, I can make Item 6 appear first on the main axis. 0:10

Even second, third, fourth, or fifth. 0:15

Or I can make Item 1 appear last on the main axis. 0:17

This is another great feature that demonstrates the power 0:22

of Flexbox's source order independence. 0:25

We can structure an HTML document for SEO or accessibility first, 0:27

then rearrange the content without ever editing the HTML. 0:33

The order proper applies to flex items only. 0:37

So if you apply the order property to a flex container, 0:40

it will have no effect on it. 0:43

Back in flexbox.css, I'm going to create a new rule that targets the class item-6. 0:44

Inside this rule, I'll add the order property. 0:53

Now the default order of all flex items is zero. 0:57

So if I want to place Item 6 at the beginning of the row, 1:02

I can give it any value lower than zero. 1:07

So back in the item-6 rule I'm going to set item-6 order value to -1. 1:10

And when I refresh the browser, Item 6 is now first in the flexbox order, 1:19

followed by Item 1, Item 2, Item 3 and so on. 1:24

Since Items 1 through 5 have an order of zero by default, 1:29

the value -1 places Item 6 before all of them. 1:35

Likewise, if I want Item 1 to appear last, I can give it any value higher than zero. 1:41

So back in my style sheet, I'm going to change this rule to target item-1, 1:48

then I'll set the order value to 1. 1:54

Items 2 through 6 have an order of 0 by default, 2:02

so the value 1 places Item 1 after them. 2:07

What do you think will happen if I target Item 2 and give it an order value of 2? 2:11

So now Items 3 through 6 still have an order of 0. 2:27

And Item 1 has an order of 1. 2:33

So Item 2 now has a higher order value. 2:37

So now it's the last item on the line. 2:41

So the order value places the flex items relative to the other items' order values. 2:45

To place a flex item before another flex item, 2:51

it needs to have a lower order value than the item. 2:54

For instance, if I now want to move Item 6 to the second position, 2:58

Item 6 needs to have a lower order value than Item 4, but 3:03

it also needs to have a higher order value than Item 3, 3:08

the item that appears before it. 3:12

Similarly, if I want to place Item 4 after Item 5, 3:15

Item 4 needs to have a higher order value than Item 5 and 3:21

a lower order value than Item 6. 3:26

Let me show you an example. 3:30

First, I'm going to reset all flex items order to zero, 3:32

by deleting all the order properties in the CSS. 3:36

So let's say I want to make item 5 appear second in this row. 3:43

So if I go back to my style sheet and create a new rule 3:49

that targets Item 5, and if I set the order value to 2, 3:54

The item actually appears last as the sixth item. 4:02

Why does this happen? 4:06

Well, it happens because Item 5 has the highest order value of all the flex items. 4:08

Remember, all other flex items have an order of 0 by default. 4:13

So the easiest way to make Item 5 appear second is to give it an order value of -1. 4:17

This places Item 5 at the beginning of the row, so 4:28

now I need to give Item 1 a lower order value. 4:32

So back in flexbox.css I'll create a new rule that targets Item 1, 4:36

and I'm going to set its order value to -2, 4:42

so that it appears before Item 5. 4:46

And there we go. 4:50

Item 5 now appears second in this row. 4:51

The order remains the same, even when you switch the layout from column to row. 4:53

So, for instance, I'll go back to the container rule. 4:59

In my style sheet, I'll add a flex-direction 5:03

property and set the value to column. 5:08

And there you have it! 5:13

The power of flex box ordering. 5:14

Now, the order property is useful for reordering content columns on mobile and 5:16

desktop screens. 5:20

For example, 5:21

on mobile screens you can place a featured content column above all columns, 5:22

then make the column appear second or third in the row on large desktop screens. 5:27

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up