Sifa order
Sifa order inaweka mpangilio wa kufuata
wa kizuizi cha flex kilichochaguliwa ndani ya
chombo cha flex. Inatumika kwa kizuizi maalum cha flex.
Kama thamani yake, sifa inakubali nambari kamili chanya au hasi. Kadiri nambari iwe ndogo ndivyo kipengele kitakavyosimama mapema, bila kujali eneo lake kwenye msimbo wa HTML ukilinganisha na vipengele vingine.
Kisarufi
kichaguli {
order: nambari chanya au hasi;
}
Mfano
Katika mfano huu, vipengele vyote vimewekewa mpangilio
wa eneo kwa kutumia order. Kizuizi cha kwanza kabisa
kitakuwa chenye order hasi -1,
kisha kile chenye order 1 na kadhalika kwa kupanda:
<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;
}
:
Angalia pia
-
sifa
flex-direction,
ambayo inaweka mwelekeo wa shoka za vizuizi vya flex -
sifa
justify-content,
ambayo inaweka mpangilio kwenye shoka kuu -
sifa
align-items,
ambayo inaweka mpangilio kwenye shoka la pili -
sifa
flex-wrap,
ambayo inaweka mistari mingi ya vizuizi vya flex -
sifa
flex-flow,
ufupisho wa flex-direction na flex-wrap -
sifa
align-self,
ambayo inaweka mpangilio wa kizuizi kimoja -
sifa
flex-basis,
ambayo inaweka ukubwa wa kizuizi maalum cha flex -
sifa
flex-grow,
ambayo inaweka uwezo wa kukua wa vizuizi vya flex -
sifa
flex-shrink,
ambayo inaweka uwezo wa kujikunja wa vizuizi vya flex -
sifa
flex,
ufupisho wa flex-grow, flex-shrink na flex-basis