CSS: order (for flex items)
order
- Property
orderis for a item in Flexbox. - It changes visual order of a flex item without changing HTML.
- Default for each item is 0.
- Negative values come before 0; positive after.
example
1
2
3
4
<div class="xzwvy-flexbox-order"> <div class="xzwvy-item">1</div> <div class="xzwvy-item">2</div> <div class="xzwvy-item">3</div> <div class="xzwvy-item">4</div> </div>
.xzwvy-flexbox-order { display: flex; margin: 5px; border: dotted 3px red; } .xzwvy-item { border: solid 1px blue; padding: 10px; margin: 5px; } .xzwvy-item:nth-child(2) { order: -1; }