ප්රධාන අක්ෂය දිගේ නම්යශීලී මූලද්රව්යයේ ප්රමාණය
width සහ height ගුණාංග
අක්ෂවල දිශාව නොසලකා නම්යශීලී මූලද්රව්යයේ
පළල සහ උස සකසයි. එනම්, අක්ෂය තිරස් නම්,
width පළල සකසන නමුත්
අක්ෂය සිරස් නම්, width තවමත්
පළල සකසයි. සමහර විට මෙවැනි හැසිරීම
පහසු නොවේ.
නම්යශීලී ආකෘතියේ විශේෂිත ගුණාංගයක් වන
flex-basis, ප්රධාන අක්ෂය දිගේ මූලද්රව්යයේ
ප්රමාණය සකසයි. මෙයින් අදහස් කරන්නේ
ප්රධාන අක්ෂය තිරස් නම් - මෙම ගුණාංගය
මූලද්රව්යවල පළල සකසන අතර, සිරස් නම්
- උස සකසන බවයි. මෙම ගුණාංගය සකසන්නේ
නම්යශීලී මූලද්රව්යවලටම වන අතර, ඒවායේ මාපිය එකට නොවේ. අපි
උදාහරණ මගින් බලමු.
දැන් ප්රධාන අක්ෂය තිරස් වන අතර,
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;
}
:
දැන් අපි ගුණාංගයේ අගය වෙනස් නොකර
අක්ෂය හැරවීම සිදු කරමු. මෙම අවස්ථාවේ දී
මූලද්රව්යවල උස 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;
}
:
5 නම්යශීලී-ගොනු සාදන්න. ඒවාට
ප්රධාන අක්ෂය දිගේ පළල 100px කින් සකසන්න.
විවිධ අක්ෂ දිගේ ගොනුවල හැසිරීම
බලන්න.
අක්ෂය තිරස් නම් සහ ගොනුවට flex-basis ගුණාංගය
සහ එකවරම width ගුණාංගය
සකසා ඇත්නම්, flex-basis වෙත
ප්රමුඛත්වය ඇත. මෙය පරීක්ෂා කරන්න.
අක්ෂය සිරස් නම් සහ ගොනුවට flex-basis ගුණාංගය
සහ එකවරම height ගුණාංගය
සකසා ඇත්නම්, flex-basis වෙත
ප්රමුඛත්වය ඇත. මෙය පරීක්ෂා කරන්න.
