Proprietatea order
Proprietatea order stabilește ordinea de succesiune
a unui flex-bloc individual în interiorul
unui flex-container. Se aplică unui anumit
bloc flex.
Ca valoare, proprietatea acceptă un număr întreg pozitiv sau negativ. Cu cât numărul este mai mic, cu atât elementul va fi poziționat mai devreme, indiferent de poziția sa în codul HTML în raport cu celelalte elemente.
Sintaxă
selector {
order: număr pozitiv sau negativ;
}
Exemplu
În acest exemplu, tuturor blocurilor li se stabilește ordinea
de poziționare cu ajutorul lui order. Primul va fi
blocul cu order negativ -1,
apoi cel cu order 1 și așa mai departe în ordine crescătoare:
<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;
}
:
Vedeți și
-
proprietatea
flex-direction,
care stabilește direcția axelor blocurilor flex -
proprietatea
justify-content,
care stabilește alinierea de-a lungul axei principale -
proprietatea
align-items,
care stabilește alinierea de-a lungul axei transversale -
proprietatea
flex-wrap,
care stabilește afișarea pe mai multe rânduri a blocurilor flex -
proprietatea
flex-flow,
prescurtare pentru flex-direction și flex-wrap -
proprietatea
align-self,
care stabilește alinierea unui singur bloc -
proprietatea
flex-basis,
care stabilește dimensiunea unui anumit bloc flex -
proprietatea
flex-grow,
care stabilește "lăcomia" blocurilor flex -
proprietatea
flex-shrink,
care stabilește compresibilitatea blocurilor flex -
proprietatea
flex,
prescurtare pentru flex-grow, flex-shrink și flex-basis
