CSS order – flex items ordering

Flex items are, by default, displayed in the same order as they appear in the source document. The order property can be used to change this ordering. Items with lower order value are placed first (default value is 0).

Syntax:

.someflexcontainer {
  display: flex;
}
.flexitem {
  order: 1;
}

CSS property order

CSS version: CSS 3
Value: ineger
Initial: 0
Applies to: flex items and absolutely-positioned children of flex containers
Inherited: no

Example – order

<style>
.fbox {
  display: flex;
  width: 250px; background-color:gray;
}
.child {
  background-color:green;
  padding: 3px; margin: 3px;
}
</style>

<div class=fbox>
<div style="order:5;" class="child">div1</div>
<div style="order:4;" class="child">div2</div>
<div class="child">div3</div>
<div class="child">div4</div>
<div class="child">div5</div>
</div>
refresh

Specification and Browser compatibility

SpecificationStatusCategories
Flexible Box Layout ModuleW3C Working DraftCSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 29+ Yes 28+ Partial 11+ Yes 12+ Yes 9+ Yes 12.1+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 9.0-9.2+ Yes 11+ Yes 12.1+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments