Codectionary / Developer documentation / CSS

Flex order and Accessible Sequence

The order property changes the order in which flex items are laid out visually.

What it is and why to use it

The order property changes the order in which flex items are laid out visually. Items with smaller order values are placed first, with document order breaking ties. It does not rewrite the DOM, so it should not be used to repair an illogical source sequence.

Common mistakes and limitations

Screen-reader reading order and ordinary sequential focus can remain in document order. A visually rearranged form or numbered sequence can therefore be confusing. Use visual reordering only where the difference is harmless and tested.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<div class="steps"><span>1: Read</span><span>2: Practice</span><span class="last">3: Review</span></div>

Syntax

order: 1;

Examples

Flex order and Accessible Sequence

Run the CSS against the supplied HTML, then experiment with the values.

.steps { display: flex; gap: 1rem; }
.steps > span { background: #dbeafe; color: #172b4d; padding: 1rem; }
.last { order: -1; }
  1. All items start with order:0 unless overridden.
  2. The last item has order:-1, so it moves visually before the other two.
  3. The resulting display demonstrates a mismatch rather than a recommended instructional layout. Put meaningful steps in their correct DOM order instead.
HTML used by this example
<div class="demo"><div class="steps"><span>1: Read</span><span>2: Practice</span><span class="last">3: Review</span></div></div>

Best practices

  • Screen-reader reading order and ordinary sequential focus can remain in document order. A visually rearranged form or numbered sequence can therefore be confusing. Use visual reordering only where the difference is harmless and tested.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading