CSS හි flex blocks හි compressibility factor
පෙර පාඩමේදී අපි සොයා ගත්තේ, flex මූලද්‍රව්‍යවලට අවකාශය නොමැති විට, ඒවා හැකිලීමට පටන් ගන්නා බවයි. මුළු පළල මව් මූලද්‍රව්‍යයේ පළලට වඩා වැඩි වන ප්‍රමාණය negative free space ලෙස හැඳින්වේ.
තාක්ෂණිකව හැකිලීම යනු සෑම මූලද්‍රව්‍යයක පළලින්ම කුඩා කොටසක් ඉවත් කර ඒවා සියල්ල මව් මූලද්‍රව්‍යයට ගැලපෙන ආකාරයට සකස් කිරීමයි.
අපි ගණනය කිරීම් කිහිපයක් කරමු. උදාහරණයක්
වශයෙන්, අපට 4 මූලද්‍රව්‍ය 200px
පළලින් යුතුව ඇතැයි සිතමු. මව් මූලද්‍රව්‍යයේ
පළල 700px ට සමාන යැයි ද සිතමු. මෙයින්
අදහස් වන්නේ මුළු මූලද්‍රව්‍ය පළල ඊට සමාන වනු ඇති බවයි:
200px * 4 = 800px
මෙම පළල මව් මූලද්‍රව්‍යයේ පළලට වඩා
100px කින් වැඩිය. ගණනය කර බලමු,
මූලද්‍රව්‍ය මව් මූලද්‍රව්‍යයට ගැලපීම සඳහා
එක් එක් මූලද්‍රව්‍යයෙන් කොපමණ ප්‍රමාණයක්
ඉවත් කළ යුතුද යන්න:
100px / 4 = 25px
එනම් මූලද්‍රව්‍යවල පළල වන්නේ:
200px - 25px = 175px
විස්තර කළ බ්ලොක් ක්‍රියාත්මක කර මැන බලා, මූලද්‍රව්‍යවල පළල ඇත්තටම අප ගණනය කළ පරිදි තිබෙනවාද යන්න පරීක්ෂා කරන්න.
බ්ලොක්වල පළල ගණනය කර, පසුව ගණනය කිරීම් මැනීමෙන් පරීක්ෂා කරන්න:
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>css.parent {
display: flex;
width: 200px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
}
.elem2 {
width: 100px;
}
.elem3 {
width: 100px;
}