A order tulajdonság segítségével módosíthatjuk a gyermekelemek megjelenítésének sorrendjét. Minél kisebb értéket adunk meg, annál előrébb, minél nagyobbat, annál hátrább kerül az adott elem.
A gyermekek sorrendjének beállítása:
kijelölő
{
order
:
szám;
}
(Alapértelmezett érték=0.)
1. Példa:
Forráskód
<head>
...
<style>
...
.Elem {
padding: 5px;
border:1px solid #066;
width:60px; height:18px;
background-color:#fff;
text-align:center;
}
.divFlex {
display: flex;
}
.wrap {
flex-wrap: wrap ;
}
</style>
</head>
<body>
<h2>Flexbox - order</h2>
<div class="divFlex wrap">
<div class="Elem" style="order:100">order:100</div>
<div class="Elem" style="order:5">order:5</div>
<div class="Elem" style="order:-1">order:-1</div>
<div class="Elem" style="order:77">order:77</div>
<div class="Elem" style="order:0">order:0</div>
<div class="Elem" style="order:15">order:15</div>
<div class="Elem" style="order:1">order:1</div>
</div>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: flexi6.html