Core Code
Core Code Modern Dev Handbook

Flex Item Order

Use the order property to change the visual order of flex items.

Preview

Code

<style>
.container{
display:flex;
gap:10px;
}

.item{
background:#2563eb;
color:white;
padding:20px;
}

.second{
order:-1;
}
</style>

<div class="container">
<div class="item">1</div>
<div class="item second">2 (first)</div>
<div class="item">3</div>
</div>

More Flex Items Examples (8)

example Flex Grow open example example Flex Shrink open example example Flex Basis open example example Flex Shorthand open example example Align Self open example example Flexible Columns open example example Card Layout Grow open example example Align Self Demo open example