What CSS property controls the order of flex items in a flex container?

The story behind the answer

The CSS `order` property controls the visual order of flex items inside a flex container.

Flex items have a default order value of `0`. Items are arranged by ascending order value, and items with equal values retain their order in the flex layout’s source sequence. A declaration such as `.featured { order: -1; }` can move an item earlier in the visual arrangement without changing the HTML.

`order` changes visual presentation, not the document’s DOM order. That distinction matters for keyboard navigation, screen readers, and other accessibility concerns, so it is usually better to keep meaningful content in a logical source order and use `order` for layout needs. The property also applies to items in a flex container created with `display: flex` or `display: inline-flex`.

Source: Wikipedia · fact-checked Aug. 2026

Add question to a list

Choose a list to keep this question in: