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

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

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

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

400px + 3 * 200px = 1000px

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

1000px - 900px = 100px

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

100px * (400px / 1000px) = 40px

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

400px - 40px = 360px

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

100px * (200px / 1000px) = 20px

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

200px - 20px = 180px

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

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

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