CSS တွင် flex ဘလောက်များ၏ width သတ်မှတ်ချက်နှင့် လောဘကြီးမှု

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

html<div class="parent">
  <div class="child elem1"></div>
  <div class="child elem2"></div>
  <div class="child elem3"></div>
</div>

css.parent {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}

.elem1 {
  width: 100px;
}
.elem2 {
  flex-grow: 1;
}
.elem3 {
  width: 100px;
}

Результат:

ထူးခြားသော အကျိုးသက်ရောက်မှုကို အထူးသဖြင့် မိဘ element ၏ width ကို ရာခိုင်နှုန်းဖြင့် သတ်မှတ်သည့်အခါ သတိထားမိသည်။ ဤကိစ္စတွင် မိဘ element ၏ width ပြောင်းလဲသွားသည့်အခါ ကျွန်ုပ်တို့၏ လောဘကြီးသည့် ဘလောက်သည် ပျော်ဝင်နေသော width ရှိမည်၊ ကျန်အရာအားလုံးကမူ width ကွက်တိရှိနေမည်-