flex ගුණය

flex ගුණය flex-basis, flex-shrink සහ flex-grow සඳහා වන සංක්ෂිප්තයකි.

යොදනු ලබන්නේ: නිශ්චිත flex බ්ලොක් එකකට.

අගයන්හි අනුපිළිවෙල වැදගත් නොවේ. දෙවන සහ තෙවන පරාමිතීන් (flex-shrink, flex-basis) අනිවාර්ය නොවේ.

අගයන්

අදාළ ගුණාංග බලන්න.

පෙරනිමි අගය: 0 1 auto.

නිදර්ශනය

අප සතුව අංග 3 ක් ඇතැයි සිතමු. ඒ සෑම එකකම පළල 200px වන අතර එකතුව 600px වේ, එය මාපිය අඩංගුවේ පළලට වඩා වැඩිය, එය 300px වේ. පළමු මූලද්‍රව්‍යය සඳහා පළල 200px, දෙවන මූලද්‍රව්‍යය සඳහා - 300px, සහ තෙවන මූලද්‍රව්‍යය සඳහා - 100px ලෙස නියම කරමු. සියලුම අංගවල flex-basis අගය 1 විය යුතු අතර, flex-shrink - 1, 2, 3 විය යුතුය, එක් එක් මූලද්‍රව්‍යයේ අනුක්‍රමික අංකයට අනුව:

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

css.parent {
  display: flex;
  width: 350px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 200px;
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  flex: 200px 1 1;
}
.elem2 {
  flex: 300px 1 2;
}
.elem3 {
  flex: 100px 1 3;
}

Результат:

මෙයද බලන්න