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