CSS ရှိ Flex ဘလောက်များ၏ ကျုံ့နိုင်စွမ်းအား ပြကြောင်း

ယခင်သင်ခန်းစာတွင် flex အစိတ်အပိုင်းများအား နေရာလုံလောက်မှုမရှိသည့်အခါ ၎င်းတို့သည် စတင်ကျုံ့သွားသည်ကို ကျွန်ုပ်တို့ရှာဖွေတွေ့ရှိခဲ့သည်။ စုစုပေါင်းအကျယ်သည် မိဘအစိတ်အပိုင်း၏အကျယ်ထက် မည်မျှပိုကြောင်းကို အနုတ်လက္ခဏာဆောင်သော လွတ်လပ်သည့်နေရာဟုခေါ်သည်။

နည်းပညာအရ ကျုံ့ခြင်းဆိုသည်မှာ အစိတ်အပိုင်းတစ်ခုစီ၏ အကျယ်မှ အစိတ်အပိုင်းငယ်တစ်ခုကို ချွေတာပစ်ခြင်းဖြစ်ပြီး အစိတ်အပိုင်းအားလုံးသည် ၎င်းတို့၏မိဘအစိတ်အပိုင်းအတွင်း အံဝင်ခွင်ကျဖြစ်စေရန်ဖြစ်သည်။

တွက်ချက်မှုအနည်းငယ်ပြုလုပ်ကြပါစို့။ ဥပမာအားဖြင့် 4 အစိတ်အပိုင်းများ 200px အကျယ်ရှိသည်ဆိုပါစို့။ ဤအချိန်တွင် မိဘအစိတ်အပိုင်း၏အကျယ်မှာ 700px ဖြစ်သည်ဆိုပါစို့။ ရလဒ်အနေဖြင့် အစိတ်အပိုင်းများ၏ စုစုပေါင်းအကျယ်မှာ:

ဤအကျယ်သည် မိဘအစိတ်အပိုင်း၏အကျယ်ထက် 100px ပိုနေသည်။ အစိတ်အပိုင်းအားလုံး ၎င်းတို့၏မိဘအစိတ်အပိုင်းအတွင်း အံဝင်ခွင်ကျဖြစ်စေရန် အစိတ်အပိုင်းတစ်ခုစီမှ မည်မျှချွေတာရမည်ကို တွက်ချက်ကြည့်ကြပါစို့:

ဆိုလိုသည်မှာ အစိတ်အပိုင်းများ၏အကျယ်မှာ:

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;
}