CSS ရှိ Flex ဘလောက်များ၏ ကျုံ့နိုင်စွမ်းအား ပြကြောင်း

ယခင်သင်ခန်းစာတွင် flex အစိတ်အပိုင်းများအား နေရာလုံလောက်မှုမရှိသည့်အခါ ၎င်းတို့သည် စတင်ကျုံ့သွားသည်ကို ကျွန်ုပ်တို့ရှာဖွေတွေ့ရှိခဲ့သည်။ စုစုပေါင်းအကျယ်သည် မိဘအစိတ်အပိုင်း၏အကျယ်ထက် မည်မျှပိုကြောင်းကို အနုတ်လက္ခဏာဆောင်သော လွတ်လပ်သည့်နေရာဟုခေါ်သည်။

နည်းပညာအရ ကျုံ့ခြင်းဆိုသည်မှာ အစိတ်အပိုင်းတစ်ခုစီ၏ အကျယ်မှ အစိတ်အပိုင်းငယ်တစ်ခုကို ချွေတာပစ်ခြင်းဖြစ်ပြီး အစိတ်အပိုင်းအားလုံးသည် ၎င်းတို့၏မိဘအစိတ်အပိုင်းအတွင်း အံဝင်ခွင်ကျဖြစ်စေရန်ဖြစ်သည်။

တွက်ချက်မှုအနည်းငယ်ပြုလုပ်ကြပါစို့။ ဥပမာအားဖြင့် 4 အစိတ်အပိုင်းများ 200px အကျယ်ရှိသည်ဆိုပါစို့။ ဤအချိန်တွင် မိဘအစိတ်အပိုင်း၏အကျယ်မှာ 700px ဖြစ်သည်ဆိုပါစို့။ ရလဒ်အနေဖြင့် အစိတ်အပိုင်းများ၏ စုစုပေါင်းအကျယ်မှာ:

200px * 4 = 800px

ဤအကျယ်သည် မိဘအစိတ်အပိုင်း၏အကျယ်ထက် 100px ပိုနေသည်။ အစိတ်အပိုင်းအားလုံး ၎င်းတို့၏မိဘအစိတ်အပိုင်းအတွင်း အံဝင်ခွင်ကျဖြစ်စေရန် အစိတ်အပိုင်းတစ်ခုစီမှ မည်မျှချွေတာရမည်ကို တွက်ချက်ကြည့်ကြပါစို့:

100px / 4 = 25px

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

200px - 25px = 175px

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

ဘလောက်များ၏အကျယ်ကို တွက်ချက်ပြီးနောက် တွက်ချက်မှုများကို တိုင်းတာခြင်းဖြင့် စစ်ဆေးပါ:

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

.parent {
	display: flex;
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}