Savybė order
Savybė order nustato atskiro
flex bloko seka
flex konteinerio viduje. Taikoma konkrečiam
flex blokui.
Savybės reikšmė gali būti teigiamas arba neigiamas sveikasis skaičius. Kuo mažesnis skaičius - tuo anksčiau elementas bus išdėstytas, nepriklausomai nuo jo išdėstymo HTML kode palyginus su kitais elementais.
Sintaksė
selektorius {
order: teigiamas arba neigiamas skaičius;
}
Pavyzdys
Šiame pavyzdyje visiems blokams seka
nustatyta naudojant order. Pats pirmas
bus blokas su neigiama order reikšme -1,
po to su order 1 ir taip toliau didėjimo tvarka:
<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;
}
:
Taip pat žiūrėkite
-
savybė
flex-direction,
kuri nustato flex blokų ašių kryptį -
savybė
justify-content,
kuri nustato lygiavimą pagrindinėje ašyje -
savybė
align-items,
kuri nustato lygiavimą skersinėje ašyje -
savybė
flex-wrap,
kuri nustato flex blokų kelių eilučių galimybę -
savybė
flex-flow,
sutrumpinimas flex-direction ir flex-wrap savybėms -
savybė
align-self,
kuri nustato vieno bloko lygiavimą -
savybė
flex-basis,
kuri nustato konkretaus flex bloko dydį -
savybė
flex-grow,
kuri nustato flex blokų "godumą" -
savybė
flex-shrink,
kuri nustato flex blokų susispaudimo laipsnį -
savybė
flex,
sutrumpinimas flex-grow, flex-shrink ir flex-basis savybėms
