CSS တွင် flex ဘလောက်များ၏ width သတ်မှတ်ချက်နှင့် လောဘကြီးမှု

ကျွန်ုပ်တို့တွင် flex ဘလောက်အချို့ရှိသည်ဆိုကြပါစို့။ ထိုဘလောက်များအနက် တစ်ခုကို flex-grow တန်ဖိုး 1 သတ်မှတ်ပြီး၊ ကျန်အရာအားလုံးကို width အချို့သတ်မှတ်လိုက်ပါ။ ရလဒ်အနေဖြင့် ဘလောက်အားလုံးသည် width ကွက်တိရှိမည်၊ ကျွန်ုပ်တို့သတ်မှတ်ထားသော လောဘကြီးသည့်ဘလောက်ကမူ ရနိုင်သော ကျန်နေရာအားလုံးကို သိမ်းပိုက်ထားမည်-

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

.parent {
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}

.elem1 {
	width: 100px;
}
.elem2 {
	flex-grow: 1;
}
.elem3 {
	width: 100px;
}

ထူးခြားသော အကျိုးသက်ရောက်မှုကို အထူးသဖြင့် မိဘ element ၏ width ကို ရာခိုင်နှုန်းဖြင့် သတ်မှတ်သည့်အခါ သတိထားမိသည်။ ဤကိစ္စတွင် မိဘ element ၏ width ပြောင်းလဲသွားသည့်အခါ ကျွန်ုပ်တို့၏ လောဘကြီးသည့် ဘလောက်သည် ပျော်ဝင်နေသော width ရှိမည်၊ ကျန်အရာအားလုံးကမူ width ကွက်တိရှိနေမည်-