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

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

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

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

.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 ပြုလုပ်ခြင်းသည် လုံလောက်စွာ အဆင်ပြေသောနည်းလမ်းတစ်ခုဖြစ်သည်။ သို့သော် ထိုသို့မဟုတ်ပါက အခြားနည်းလမ်းတစ်ခုခုကို စဉ်းစားရန်လိုအပ်ပါမည်။

Element 12 ခုပေးထားသည်။ ၎င်းတို့ကို tile layout တစ်ခုအဖြစ် တစ်တန်းလျှင် element 4 ခုစီဖြင့်၊ element တစ်ခုစီ၏အကျယ်မှာ 100px နှင့် ၎င်းတို့ကြားရှိ အကွာအဝေးမှာ 20px ဖြစ်အောင် ပြုလုပ်ပါ။

Element 12 ခုပေးထားသည်။ ၎င်းတို့ကို tile layout တစ်ခုအဖြစ် တစ်တန်းလျှင် element 3 ခုစီဖြင့်၊ element တစ်ခုစီ၏အကျယ်မှာ 150px နှင့် ၎င်းတို့ကြားရှိ အကွာအဝေးမှာ 10px ဖြစ်အောင် ပြုလုပ်ပါ။