order

Summary

The order property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.

Overview table

Initial value

0

Applies to

flex items and absolutely-positioned flex container children

Inherited

No

Media

visual

Computed value

specified value

Animatable

Yes

CSS Object Model Property

order

Syntax

• flex-order: integer
• order: <integer>

Values

<integer>

The ordinal group for this flex item.

Examples

Displaying children in custom sequence

.list {
  display: flex;
}
.list div {
  flex: 1;
}
.list .first {
  order: 3;
}
.list .second {
  order: 1;
}
.list .third {
  order: 2;
}

View live example

The Holy Grail Layout example. Given a source order of article-nav-aside, use order to rearrange these elements as flex items into nav-article-aside

article { order: 2; }
nav { order: 1; }
aside { order: 3; }

Notes

This property was previously named flex-order in earlier drafts.

Related specifications

CSS Flexible Box Layout Module

Candidate Recommendation