Andy from Webcrunch

Subscribe for email updates:

Portrait of Andy Leverenz
Andy Leverenz

January 17, 2021

Last updated November 5, 2023

Intro to CSS Flexbox - Order

Order is a neat way to define more exact ordering of how child elements of a flex container display.

To assign order you use the order: CSS property on a given flex item. Doing this on one item if there are multiple with throw things out of wack a bit because you need to define order for all child flex items for this to behave properly.

Order is only respected if a container is of course displaying flex.

.flex-item {
  order: 3; /* default is 0 */
}

CodePen

See the Pen flexbox - order by Andy Leverenz (@webcrunchblog) on CodePen.

Tags: flexbox order
Link this article
Est. reading time: 57 seconds
Stats: 1,191 views

Collection

Part of the CSS Flexbox collection