Web4College

CSS order property

src

Description

CSS order determines the order of a flex item. The order means a flex item placed anywhere in the list of flex items can be positioned at the start or end of of this list.


We have four flex items in the flex container. We'll position the third flex item with order property.

Syntax

order : integer

Property values

integerDefault

0

An integeral value determines the order of flex item in a flex container. 0 value does not change the position of flex item.

order: 0;
Try it

-ve integer

-1

-1 value positions the third flex item at the start of container.

This value positions the third item (3) at the start of flex container.

order: -1;
Try it

+ve integer

1

1 value positions the third flex item at the end of flex container. This value positions the third item at the end of flex container

This value positions the third item (3) at the end of flex container.

order: 1;
Try it

Applicable to

It applies to flex items.