ප්‍රධාන අක්ෂය දිගේ නම්‍යශීලී මූලද්‍රව්‍යයේ ප්‍රමාණය

width සහ height ගුණාංග අක්ෂවල දිශාව නොසලකා නම්‍යශීලී මූලද්‍රව්‍යයේ පළල සහ උස සකසයි. එනම්, අක්ෂය තිරස් නම්, width පළල සකසන නමුත් අක්ෂය සිරස් නම්, width තවමත් පළල සකසයි. සමහර විට මෙවැනි හැසිරීම පහසු නොවේ.

නම්‍යශීලී ආකෘතියේ විශේෂිත ගුණාංගයක් වන flex-basis, ප්‍රධාන අක්ෂය දිගේ මූලද්‍රව්‍යයේ ප්‍රමාණය සකසයි. මෙයින් අදහස් කරන්නේ ප්‍රධාන අක්ෂය තිරස් නම් - මෙම ගුණාංගය මූලද්‍රව්‍යවල පළල සකසන අතර, සිරස් නම් - උස සකසන බවයි. මෙම ගුණාංගය සකසන්නේ නම්‍යශීලී මූලද්‍රව්‍යවලටම වන අතර, ඒවායේ මාපිය එකට නොවේ. අපි උදාහරණ මගින් බලමු.

දැන් ප්‍රධාන අක්ෂය තිරස් වන අතර, flex-basis හි අගය 50px වේ. මෙම අවස්ථාවේ දී මූලද්‍රව්‍යවල පළල 50px වේ:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent {
  display: flex;
  flex-direction: row; /* අක්ෂය තිරස් වේ */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;   /* මූලද්‍රව්‍යයේ ප්‍රමාණය */
  border: 1px solid green;
}

Результат:

දැන් අපි ගුණාංගයේ අගය වෙනස් නොකර අක්ෂය හැරවීම සිදු කරමු. මෙම අවස්ථාවේ දී මූලද්‍රව්‍යවල උස 50px වේ:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent {
  display: flex;
  flex-direction: column; /* අක්ෂය සිරස් වේ */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат: