In this section, we will learn what the order property is and how to use it in CSS.

Click here to run the example of order property.

CSS order Property Definition and Usage

By default, flex-items are laid out along the main-axis in the order they appear in the source code.

But CSS provided a property named `order` by which we can change the order of the flex-items within their container.

CSS order Property Syntax

order: number|initial|inherit;

CSS order Property Value

The value we set for the `order` property can be positive and negative numbers. If multiple flex-items have the same value for the `order` property, they’ll appear according to their position in the source code.

Also, the default value for `order` property is 0, meaning all elements in the flex-container should be placed according to their position in the source code. In such case, specifying the value 1 to a flex-item element will move it to the end and the value -1 will move it to the beginning of the list.

Note: the three global values “initial“, “inherit” and “unset” can also be used for this property.

Example: order property in CSS

See the Pen order property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Warning: do not heavily use the `order` property because it can harm the accessibility of your site because navigation using the Tab-key still uses the source order in most browsers and so this can confuse the audience if they use Tab key. Also, most Screen-reading apps for visually impaired people use the source order to read contents.