CSS හි flex බ්ලොක් වල අනුපිළිවෙල
පහත දක්වා ඇති බ්ලොක්, පේළියකට සකසා ඇති බව සලකන්න:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
.parent {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
HTML කේතයේ ඒවායේ අනුපිළිවෙල වෙනස් නොකර, තිරය මත ඒවායේ දර්ශන අනුපිළිවෙල වෙනස් කරමු.
මේ සඳහා order ගුණාංගය පවතී,
එය නිශ්චිත මූලද්රව්යවල අනුපිළිවෙල පහත නියමය අනුව සකසයි: වැඩි අගයක් ඇත්තා අක්ෂයේ කෙළවරට ආසන්නව ද,
අඩු අගයක් ඇත්තා ආරම්භයට ආසන්නව ද සිටී.
ගුණාංගයේ අගය ධන හෝ ඍණ අංකයක් විය හැක.
පෙරනිමිය අනුව සියලුම මූලද්රව්ය එකිනෙකා පසුපස යන අතර, මෙයින් අදහස් කරන්නේ
ඔවුන්ගේ order අගය ශුන්ය බවයි.
අපගේ මූලද්රව්යවල අනුපිළිවෙල වෙනස් කරමු.
මේ සඳහා දෙවන මූලද්රව්යට අතිරේක
වර්ගය elem යෙදීමෙන් පසු එම වර්ගය සඳහා
order ගුණාංගය 1 අගයට සකසමු:
.elem {
order: 1;
border: 1px solid red;
}
පෙරනිමිය අනුව සියලුම මූලද්රව්යවල
අනුපිළිවෙල 0 වන අතර, අපගේ දෙවන මූලද්රව්යයේ
අනුපිළිවෙල අනෙක් ඒවාට වඩා වැඩි බැවින් එය
ඒවාට පසුව පිහිටා ඇත:
දැන් අපි ඍණ අගයක්
-1 ලෙස නියම කරමු:
.elem {
order: -1;
border: 1px solid red;
}
මෙම අවස්ථාවේදී අපගේ බ්ලොක් අක්ෂයේ ආරම්භය දෙසට ගමන් කරයි:
විවිධ අක්ෂ දිශාවන් සඳහා මෙම ගුණාංගයේ ක්රියාකාරිත්වය ඔබම පරීක්ෂා කරන්න.
