CSS တွင် Flexbox များဖြင့် Tile Layout ပြုလုပ်ရာတွင် ကြုံတွေ့ရသော ပြဿနာများ

Tile Layout ၏ ပထမဆုံးပြဿနာမှာ ယေဘုယျအားဖြင့် ချက်ချင်းသိသာပါသည် - မိဘ element အတွက် အမြင့်ကို ရှင်းရှင်းလင်းလင်း သတ်မှတ်ပေးရခြင်းသည် အလွန်အဆင်မပြေပါ။ ကျွန်ုပ်တို့တွင် ဒိုင်းနမစ်အရ ပြောင်းလဲနေသော block များ၏ အရေအတွက်ရှိပြီး၊ ၎င်းတို့၏ အရေအတွက်သည် 9 ထက် ပိုနည်းသည်ဖြစ်စေ၊ ပိုများသည်ဖြစ်စေ ဖြစ်နိုင်ပါသည်။

ဒုတိယပြဿနာမှာမူ နောက်ဆုံးအတန်းတွင် block များ လုံလောက်စွာမရှိပါက ဖြစ်ပေါ်လာမည်။ ဤကိစ္စတွင် နောက်ဆုံးအတန်းသည် မလှပတော့ပါ။

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

css.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ကျွန်ုပ်တို့၏ကိစ္စတွင် ပင်ပင်ရင်းရင်း space-between တန်ဖိုးသည် အလျားလိုက်အနေအထားတွင်ပင် ကောင်းစွာအလုပ်မလုပ်ကြောင်း ထွက်ပေါ်လာသည်။

အတိုချုပ်ပြောရလျှင်၊ သင့် child element များ၏ အရေအတွက်သည် အမြဲတမ်းပုံသေဖြစ်ပြီး မိဘ element အတွင်း ပုံမှန်နေရာယူနိုင်ပါက၊ space-between ဖြင့် tile layout ပြုလုပ်ခြင်းသည် လုံလောက်စွာ အဆင်ပြေသောနည်းလမ်းတစ်ခုဖြစ်သည်။ သို့သော် ထိုသို့မဟုတ်ပါက အခြားနည်းလမ်းတစ်ခုခုကို စဉ်းစားရန်လိုအပ်ပါမည်။