order

The order property is a sub-property of the Flexible Box Layout module.Flex items are displayed in the same order as they appear in the source document by default. The order property can be used to change this ordering.

.elememt {
  order: 3;
}

Syntax

order: <number>

Demo

The following demo shows how the default order (1, 2, 3, 4, 5) has been altered by setting the order property to each item.

Other Resources

• CSS Flexible Box Layout Module Level 1
• MDN documentation
• Advanced cross-browser flexbox
• A guide to Flexbox
• Using Flexbox
• Old Flexbox and new Flexbox

Browser support

• ¹ Supported with prefix -ms-
• ¹ Supported with prefix -webkit-

For more informations about how to mix syntaxes in order to get the best browser support, please refer to “Using Flexbox” and this article from DevOpera.

Related

Almanac on Sep 30, 2022

flex

.element { flex: 1 1 100px; }

Sara Cope

Almanac on Sep 30, 2022

flex-basis

.element { flex-basis: 100px; }

34 Cross

Almanac on Aug 4, 2021

flex-grow

.flex-item { flex-grow: 2; }

flex-grow flexbox

Chris Coyier

Almanac on Aug 4, 2021

flex-shrink

.element { flex-shrink: 2; }

Almanac on Dec 27, 2018

align-self

.box { align-self: flex-end; }

34 Cross