Flexbox allows you to easily reorder items depending on your layout needs. As you'd expect, the property that lets you set ordering is called order
. In the example we've been using so far (with 6 different elements), let's reorder them to show all the odd elements first, followed by the even numbers:
.container div:nth-child(1) {
order: 1;
}
.container div:nth-child(3) {
order: 2;
}
.container div:nth-child(5) {
order: 3;
}
.container div:nth-child(2) {
order: 4;
}
.container div:nth-child(4) {
order: 5;
}
.container div:nth-child(6) {
order: 6;
}
I could set outrageous values, and as long as the values are in order (ex. the first element's order
value is lower than second element's order
value), the ordering will still happen the way we want:
.container div:nth-child(1) {
order: 1;
}
.container div:nth-child(3) {
order: 30;
}
.container div:nth-child(5) {
order: 900;
}
.container div:nth-child(2) {
order: 950;
}
.container div:nth-child(4) {
order: 12000;
}
.container div:nth-child(6) {
order: 2500000;
}
Of course, you should try to use logical values instead of extreme ones! The wild numbers above are just to illustrate a point.
Your Turn
Try reordering elements for yourself in this interactive exercise:
In style.css
, find the style rules for each child of the div
with the class of container
.
Add an order
property to each child so that the children appear in the following order:
The "6" rectangle should appear first.
The "4" rectangle should appear second.
The "2" rectangle should appear third.
The "5" rectangle should appear fourth.
The "3" rectangle should appear fifth.
The "1" rectangle should appear last.
Recap
Use the
order
property to reorder elements in your layout without touching the HTML.