flex ගුණය
flex ගුණය flex-basis,
flex-shrink
සහ flex-grow සඳහා වන සංක්ෂිප්තයකි.
යොදනු ලබන්නේ: නිශ්චිත flex බ්ලොක් එකකට.
අගයන්හි අනුපිළිවෙල වැදගත් නොවේ. දෙවන සහ තෙවන
පරාමිතීන් (flex-shrink, flex-basis)
අනිවාර්ය නොවේ.
අගයන්
අදාළ ගුණාංග බලන්න.
පෙරනිමි අගය: 0 1 auto.
නිදර්ශනය
අප සතුව අංග 3 ක් ඇතැයි සිතමු. ඒ සෑම එකකම පළල
200px වන අතර එකතුව 600px වේ,
එය මාපිය අඩංගුවේ පළලට වඩා වැඩිය, එය
300px වේ. පළමු මූලද්රව්යය සඳහා පළල
200px, දෙවන මූලද්රව්යය සඳහා - 300px, සහ
තෙවන මූලද්රව්යය සඳහා - 100px ලෙස නියම කරමු. සියලුම අංගවල
flex-basis අගය 1 විය යුතු අතර,
flex-shrink - 1, 2, 3 විය යුතුය, එක් එක් මූලද්රව්යයේ
අනුක්රමික අංකයට අනුව:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem2">3</div>
</div>
.parent {
display: flex;
width: 350px;
height: 200px;
border: 1px solid red;
}
.child {
width: 200px;
height: 50px;
border: 1px solid green;
}
.elem1 {
flex: 200px 1 1;
}
.elem2 {
flex: 300px 1 2;
}
.elem3 {
flex: 100px 1 3;
}
:
මෙයද බලන්න
-
flex-directionගුණය,
එය flex බ්ලොක් වල අක්ෂවල දිශාව නියම කරයි -
justify-contentගුණය,
එය ප්රධාන අක්ෂය දිගේ පෙළගැස්ම නියම කරයි -
align-itemsගුණය,
එය හරස් අක්ෂය දිගේ පෙළගැස්ම නියම කරයි -
flex-wrapගුණය,
එය flex බ්ලොක් වල බහු-පේළිතාවය නියම කරයි -
flex-flowගුණය,
flex-direction සහ flex-wrap සඳහා වන සංක්ෂිප්තය -
orderගුණය,
එය flex බ්ලොක් වල අනුපිළිවෙල නියම කරයි -
align-selfගුණය,
එය තනි බ්ලොක් එකක පෙළගැස්ම නියම කරයි -
flex-basisගුණය,
එය නිශ්චිත flex බ්ලොක් එකක ප්රමාණය නියම කරයි -
flex-growගුණය,
එය flex බ්ලොක් වල ලෝභභාවය (වර්ධනය වීමේ සාධකය) නියම කරයි -
flex-shrinkගුණය,
එය flex බ්ලොක් වල සංකෝචනය වීමේ හැකියාව නියම කරයි
