CSS ရှိ Flex ဘလောက်များ၏ မတူညီသော အကျယ်များနှင့် ကျုံ့နိုင်စွမ်း

ယခုကျွန်ုပ်တို့၏ အစိတ်အပိုင်းများတွင် မတူညီသော အကျယ်များရှိပါစေ။ ဤကိစ္စတွင် ခွဲထုတ်လိုက်သော အပိုင်းအစသည် ထို element ၏ အကျယ်နှင့် အချိုးကျပြီး အောက်ပါပုံသေနည်းအရ တွက်ချက်လိမ့်မည် - negative free space * (element width / ဒြပ်စင်အားလုံး၏ စုစုပေါင်းအကျယ်)။

ကျွန်ုပ်တို့တွင် 4 အစိတ်အပိုင်းများရှိသည်ဟု ဆိုကြပါစို့။ ပထမ element ၏ အကျယ်သည် 400px နှင့် ညီမျှပြီး၊ ကျန်အစိတ်အပိုင်းများ၏ အကျယ်မှာ 200px ဖြစ်ကာ၊ မိဘ၏အကျယ်မှာ 900px ဖြစ်သည်။

အစိတ်အပိုင်းများ၏ စုစုပေါင်းအကျယ်မှာ

ထို့နောက် အနုတ်လက္ခဏာ လွတ်လပ်နေရာ ညီမျှလိမ့်မည်

ပထမ element မှ မည်မျှခွဲထုတ်မည်ကို ရှာဖွေကြည့်ရအောင်

ဆိုလိုသည်မှာ ၎င်း၏အကျယ်သည် ညီမျှလိမ့်မည်

ကျန်အစိတ်အပိုင်းတစ်ခုစီမှ မည်မျှရမည်ကို ရှာဖွေကြည့်ရအောင်

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

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