In this section, we will learn what the order property is and how to use it in CSS.
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
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.
Example: order property in CSS
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.