on Sep 4, 2016
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>
Specification and Browser compatibility Desktop Chrome Firefox IE Edge Safari Opera Yes 29+ Yes 28+ Partial 11+ Yes 12+ Yes 9+ Yes 12.1+
Mobile Android Chrome Android Firefox iOS Safari IE Mobile Opera Mobile Yes 47+ Yes 44+ Yes 9.0-9.2+ Yes 11+ Yes 12.1+
