order ගුණය
order ගුණය flex-කන්ටේනරයක් තුළ
වෙන වෙනම flex-බ්ලොකයක අනුපිළිවෙල
සකසයි. නිශ්චිත flex බ්ලොකයකට යොදනු ලැබේ.
ගුණය එහි අගය ලෙස ධන හෝ ඍණ පූර්ණ සංඛ්යාවක් ගනී. අංකය අඩු වන තරමට මූලද්රව්යය වඩාත් පළමුව පවතිනු ඇත, එය HTML කේතය තුළ වෙනත් මූලද්රව්යවලට සාපේක්ෂව පිහිටීමෙන් ස්වාධීනව.
වාක්ය රචනා ක්රමය
තෝරන්නා {
order: ධන හෝ ඍණ අංකය;
}
උදාහරණය
මෙම උදාහරණයේ, සියලු බ්ලොක සඳහා order භාවිතයෙන්
පිළිවෙල සකසා ඇත. ඍණ order -1 සහිත බ්ලොකය
පළමුව පැමිණේ, පසුව order 1 සහිත බ්ලොකය
පැමිණෙන අතර පසුව අනෙක් ඒවා වැඩිවන අනුපිළිවෙලට පැමිණේ:
<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;
}
:
මෙයද බලන්න
-
flex-directionගුණය,
එය flex බ්ලොකවල අක්ෂවල දිශාව සකසයි -
justify-contentගුණය,
එය ප්රධාන අක්ෂය ඔස්සේ පෙළගැස්ම සකසයි -
align-itemsගුණය,
එය හරස් අක්ෂය ඔස්සේ පෙළගැස්ම සකසයි -
flex-wrapගුණය,
එය flex බ්ලොකවල බහු-පේළිකතාව සකසයි -
flex-flowගුණය,
flex-direction සහ flex-wrap සඳහා කෙටි යෙදුම -
align-selfගුණය,
එය එක් බ්ලොකයක පෙළගැස්ම සකසයි -
flex-basisගුණය,
එය නිශ්චිත flex බ්ලොකයක ප්රමාණය සකසයි -
flex-growගුණය,
එය flex බ්ලොකවල ලොබි ගතිය සකසයි -
flex-shrinkගුණය,
එය flex බ්ලොකවල හකුළුවන සුලු බව සකසයි -
flexගුණය,
flex-grow, flex-shrink සහ flex-basis සඳහා කෙටි යෙදුම
