flex-shrink ගුණය
flex-shrink ගුණය නිර්වචනය කරන්නේ,
flex-කන්ටේනරය තුළ නිදහස් ඉඩ ප්රමාණය ප්රමාණවත් නොවන විට
යාබද මූලද්රව්යවලට සාපේක්ෂව flex-කොටස
කෙතරම් දුරට හැකිලෙනු ඇත්ද යන්නයි.
උදාහරණයක් ලෙස, flex-කන්ටේනරයක් තුළ ඇති සියලුම flex-කොටස්වලට
flex-shrink:1 තිබේ නම්, ඒවා
සමාන ප්රමාණයේ වේ. ඒවායින් එකකට
flex-shrink:2 තිබේ නම්, එය අනෙක් සියල්ලට වඩා
2 ගුණයකින් කුඩා වේ.
අදාළ වන්නේ: නිශ්චිත flex-කොටසකට.
මෙම ගුණය කෙටි-ගුණය වන
flex ගුණයේ අංගයක් ලෙස ඇතුළත් වේ.
වාක්ය රීතිය
තෝරන්නා {
flex-shrink: ධන අංකය;
}
පෙරනිමි අගය: 1.
උදාහරණය
අප සතුව 3 මූලද්රව්ය ඇතැයි සිතමු. ඒවායින් එක් එක් පළල
200px වන අතර ඒවායේ එකතුව 600px වේ,
එය මව්-කන්ටේනරයේ පළලට වඩා වැඩිය,
මව්-කන්ටේනරයේ පළල 350px වේ:
<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-shrink: 1;
}
.elem2 {
flex-shrink: 2;
}
.elem3 {
flex-shrink: 3;
}
:
සෘණ නිදහස් ඉඩ ප්රමාණය ගණනය කරමු සූත්රය භාවිතා කරමින්:
600px - 350px = 250px
එක් එක් මූලද්රව්යයේ flex-shrink ගුණයේ අගය සැලකිල්ලට ගනිමින්
මූලද්රව්යවල සම්පූර්ණ බර පළල
සමාන වන්නේ:
200px * 1 + 200px * 2 + 200px * 3 = 1200pxදැන් අපි පළමු මූලද්රව්යය කෙතරම් හැකිලෙයිද යන්න තීරණය කරමු:
250px * 1 (flex-shrink) * 200 (width) / 1200 = 41,6pxදෙවන මූලද්රව්යය:
250px * 2 (flex-shrink) * 200 (width) / 1200 = 83,3pxතෙවන මූලද්රව්යය:
250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px
මෙහි අදහස වන්නේ, flex-shrink ගුණයේ අගය
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ගුණය,
flex-grow, flex-shrink සහ flex-basis සඳහා කෙටි-ගුණය
