Order
Learn the visual order of items with order.
What is order?
The order property changes the visual order of a flex item. The default value is 0. Items are sorted by order from smallest to largest, then by source order.
For example, giving an item order: -1 moves it to the front; order: 1 sends it to the back. This only changes the visual order; the HTML position stays the same.
Negative values and visual order
order values can be negative. Values like -1 or -2 push items even further to the front. Items with the same order fall back to source order.
order only changes the visual order. Screen readers and keyboard navigation still follow the HTML order. So keep important content in the right place in HTML, and use order only for visual layout.
Exercise Bring the lead to the front
Add an order declaration to elements inside a .hero container. Give the .hero .lead selector order: -1. Do not touch the .hero container.
Show example solution
/* bring the lead to the front */
.hero .lead {
order: -1;
}Test yourself
-
In a three-item row, the second item gets order: -1. What happens?
- The item moves to the front
- The item moves to the back
- The item disappears
- The order stays the same
Show answer
The item moves to the front — Correct. order: -1 is smaller than the default 0, so the item moves to the front.
-
Write the order: 1 declaration
.highlight { ____: 1; }Show answer
.highlight { order: 1; } -
Match each order value to its effect
- order: -1
- Moves to the front
- order: 0
- Source order
- order: 1
- Pushes toward the back
- order: 2
- Pushes further back