Javatpoint Logo
Javatpoint Logo

CSS order

This CSS property specifies the order of the flex item in the grid container or flex. It is basically used for ordering the flex items. It is to note that, if the element isn't flexible, then this property will not work.

The elements will get displayed in the increasing order of their order values. If two elements use the same order value, then they will display based on their occurrence defined in the source code.

The order property modifies the visual order of the flex items. The item with the lowest order value comes first, and a higher value will be placed afterward. It only affects the visual order of elements rather than the tab or logical order. It must not be used on non-visual media such as speech.

It is allowed to define the negative values of order. Negative values are useful when we want to display one item first and leave the order of other items unchanged. When there is no value is specified, then the value 0 will be used, which is its default value. So, when we want to display an item first, we can provide it a negative value such as -1. As this negative value is smaller than 0, then the corresponding item will always be displayed first.

Syntax

Values

The order property uses the integer values for defining the order of the items.

integer: It is used to specify the order of the flexible item. Its default value is 0.

initial: It sets the property value to its default value.

inherit: As its name implies, the element uses the computed value of its parent element.

Let's understand the order property using some illustrations.

Example1

Test it Now

In the above example, we have used the negative values as well as the same order values of some elements. The elements having small value will display first and the same order values will display on the basis of their occurrence in code.

As in the above example one div element has the order value -2 then, it will display first and after that the element with order value -1 displayed and so on.

Example2

Test it Now





Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA