Lastnost order
Lastnost order določa vrstni red
posameznega flex bloka znotraj
flex kontejnerja. Uporablja se za posamezen
flex blok.
Lastnost sprejme pozitivno ali negativno celo število. Manjše kot je število, prej se bo element prikazal, neodvisno od njegovega položaja v HTML kodi glede na druge elemente.
Sintaksa
selektor {
order: pozitivno ali negativno število;
}
Primer
V tem primeru je vsem blokom določen vrstni red
z lastnostjo order. Prvi bo blok z negativnim order -1,
nato z order 1 in tako naprej po naraščajočem vrstnem redu:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
<div id="elem6">6</div>
</div>
#parent {
display: flex;
align-items: flex-start;
flex-direction: row;
}
#parent > div {
border: 1px solid #696989;
min-width: 100px;
}
#elem1 {
order: 4;
}
#elem2 {
order: 5;
}
#elem3 {
order: 3;
}
#elem4 {
order: 2;
}
#elem5 {
order: 1;
}
#elem6 {
order: -1;
}
:
Glej tudi
-
lastnost
flex-direction,
ki določa smer osi flex blokov -
lastnost
justify-content,
ki določa poravnavo vzdolž glavne osi -
lastnost
align-items,
ki določa poravnavo vzdolž prečne osi -
lastnost
flex-wrap,
ki določa večvrstičnost flex blokov -
lastnost
flex-flow,
okrajšava za flex-direction in flex-wrap -
lastnost
align-self,
ki določa poravnavo enega bloka -
lastnost
flex-basis,
ki določa velikost posameznega flex bloka -
lastnost
flex-grow,
ki določa "pohlepnost" flex blokov -
lastnost
flex-shrink,
ki določa stisljivost flex blokov -
lastnost
flex,
okrajšava za flex-grow, flex-shrink in flex-basis