CSS ရှိ Flex အစိတ်အပိုင်းများ၏ သုည လောဘ

တစ်စုံတစ်ခုသော အစိတ်အပိုင်းအတွက် flex-grow သည် သုညနှင့်ညီမျှပါက၊ ထိုအစိတ်အပိုင်းသည် လွတ်လပ်သောနေရာများကို ခွဲဝေခြင်းတွင် ပါဝင်မည်မဟုတ်ပါ။ ပုံသေအားဖြင့်၊ လောဘသည် သုညတန်ဖိုးကိုသာ ရှိပြီး ထို့ကြောင့် flex-grow သတ်မှတ်ချက်မရှိသော အစိတ်အပိုင်းများသည် ၎င်းတို့အချင်းချင်း လွတ်လပ်သောနေရာများကို မျှဝေခြင်းမပြုပါ။

ဥပမာအနေနှင့် တွက်ချက်မှုတစ်ခုခု လုပ်ကြည့်ရအောင်။ ကျွန်ုပ်တို့တွင် flex အစိတ်အပိုင်း သုံးခုရှိပါစေ၊ တစ်ခုစီသည် 100px အနံရှိပါစေ။ ပထမ အစိတ်အပိုင်းတွင် flex-grow မရှိပါက (သို့မဟုတ် 0 နှင့်ညီပါက)၊ ဒုတိယ အစိတ်အပိုင်းတွင် flex-grow ရှိပြီး ၎င်းသည် 2 နှင့်ညီပါက၊ တတိယ အစိတ်အပိုင်းမှာ 3 နှင့်ညီပါစေ။

မိဘ၏ အနံသည် 500px နှင့်ညီပါစေ။ ထိုအခါ လွတ်လပ်သောနေရာသည် 200px နှင့်ညီမည်ဖြစ်ပြီး၊ flex-grow တစ်ယူနစ်စီအတွက် 200px / 5 = 40px ရရှိမည်။ ရလဒ်အနေနှင့်၊ ပထမ အစိတ်အပိုင်း၏ အနံသည် 100px အတိုင်းပင် ကျန်ရှိနေမည်။ အဘယ်ကြောင့်ဆိုသော် ၎င်းသည် ခွဲဝေခြင်းတွင် ပါဝင်မှုမရှိသောကြောင့်ဖြစ်သည်။ ဒုတိယ အစိတ်အပိုင်း၏ အနံသည် 100px + 2 * 40px = 180px ဖြစ်ပြီး၊ တတိယ အစိတ်အပိုင်း၏ အနံမှာ 100px + 3 * 40px = 220px ဖြစ်လာမည်။

လက်တွေ့လေ့ကျင့်ခန်းများ

အောက်ပါလေ့ကျင့်ခန်းအားလုံးတွင်၊ သင့်အား flex အစိတ်အပိုင်းများပါရှိသော ကုဒ်တစ်ခု ပြသပေးမည်ဖြစ်ပြီး၊ ထိုအစိတ်အပိုင်းများတွင် အနံနှင့် flex-grow ရှိပါမည်။ ပြသထားသောကုဒ်ကို အသုံးပြု၍ အစိတ်အပိုင်းတစ်ခုစီ၏ အရွယ်အစားကို တွက်ချက်ပါ။ ထို့နောက် ကုဒ်ကို စတင်လုပ်ဆောင်၍ အစိတ်အပိုင်းများ၏ လက်တွေ့အနံများကို တိုင်းတာကာ သင့် တွက်ချက်မှုများကို စစ်ဆေးပါ။

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: 500px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 0;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}
.elem3 {
  width: 100px;
  flex-grow: 1;
}

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: 900px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 300px;
  flex-grow: 0;
}
.elem2 {
  width: 200px;
  flex-grow: 3;
}
.elem3 {
  width: 100px;
  flex-grow: 2;
}

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

css.parent {
  display: flex;
  width: 700px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 0;
}
.elem2 {
  width: 200px;
  flex-grow: 0;
}
.elem3 {
  width: 100px;
  flex-grow: 1;
}
.elem4 {
  width: 100px;
  flex-grow: 1;
}