ပင်မဝင်ရိုးတစ်လျှောက် flex element ၏အရွယ်အစား

width နှင့် height ဂုဏ်သတ္တိများသည် ဝင်ရိုးများ၏ဦးတည်ချက်မရွေး flex element ၏ အကျယ်နှင့်အမြင့်ကိုသတ်မှတ်ပေးသည်။ ဆိုလိုသည်မှာ၊ ဝင်ရိုးသည် ရေပြင်ညီဖြစ်ပါက width သည် အကျယ်ကိုသတ်မှတ်မည်ဖြစ်သော်လည်း ဝင်ရိုးသည် ဒေါင်လိုက်ဖြစ်ပါက width သည် ဆက်လက်ပင် အကျယ်ကိုသတ်မှတ်နေမည်ဖြစ်သည်။ တစ်ခါတစ်ရံ ထိုသို့သောအပြုအမူသည် အဆင်မပြေပေ။

Flex model တွင် အထူးဂုဏ်သတ္တိတစ်ခုရှိသည် အဲဒါက flex-basis ဖြစ်ပြီး၊ ၎င်းသည် element ၏အရွယ်အစားကို ပင်မဝင်ရိုးတစ်လျှောက်သတ်မှတ်ပေးသည်။ ဆိုလိုသည်မှာ ပင်မဝင်ရိုးသည် ရေပြင်ညီဖြစ်ပါက - ဤဂုဏ်သတ္တိသည် element များ၏အကျယ်ကိုသတ်မှတ်မည်ဖြစ်ပြီး၊ ဒေါင်လိုက်ဖြစ်ပါက - အမြင့်ကိုသတ်မှတ်မည်ဖြစ်သည်။ ဤဂုဏ်သတ္တိကို flex element များကိုယ်တိုင်သတ်မှတ်ရန်လိုအပ်ပြီး ၎င်းတို့၏မိဘ element ကိုမဟုတ်ပေ။ ဥပမာများဖြင့် ကြည့်ရှုကြပါစို့။

လက်ရှိတွင် ပင်မဝင်ရိုးသည် ရေပြင်ညီဖြစ်ပြီး၊ flex-basis တွင် တန်ဖိုး 50px ရှိသည်ဆိုပါစို့။ ဤကိစ္စတွင် element များ၏အကျယ် သည် 50px ဖြစ်လိမ့်မည် -

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

.parent {
	display: flex;
	flex-direction: row; /* ဝင်ရိုးသည် ရေပြင်ညီဖြစ်သည် */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* element ၏အရွယ်အစား */
	border: 1px solid green;
}

ယခု ဂုဏ်သတ္တိ၏တန်ဖိုးကို မပြောင်းဘဲ ဝင်ရိုးကို လှန်ကြည့်ကြပါစို့။ ဤကိစ္စတွင် element များ၏အမြင့်သည် 50px ဖြစ်လိမ့်မည် -

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

.parent {
	display: flex;
	flex-direction: column; /* ဝင်ရိုးသည် ဒေါင်လိုက်ဖြစ်သည် */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

5 flex block များပြုလုပ်ပါ။ ၎င်းတို့ကို ပင်မဝင်ရိုးတစ်လျှောက် အကျယ်ကို 100px သတ်မှတ်ပေးပါ။ မတူညီသောဝင်ရိုးများတစ်လျှောက် block များ၏အပြုအမူကို ကြည့်ရှုပါ။

ဝင်ရိုးသည် ရေပြင်ညီဖြစ်ပြီး block တစ်ခုအား flex-basis ဂုဏ်သတ္တိနှင့်တစ်ချိန်တည်းမှာပင် width ဂုဏ်သတ္တိ သတ်မှတ်ထားပါက၊ flex-basis သည် ဦးစားပေးရရှိလိမ့်မည်။ ဤအချက်ကို စမ်းသပ်စစ်ဆေးပါ။

ဝင်ရိုးသည် ဒေါင်လိုက်ဖြစ်ပြီး block တစ်ခုအား flex-basis ဂုဏ်သတ္တိနှင့်တစ်ချိန်တည်းမှာပင် height ဂုဏ်သတ္တိ သတ်မှတ်ထားပါက၊ flex-basis သည် ဦးစားပေးရရှိလိမ့်မည်။ ဤအချက်ကို စမ်းသပ်စစ်ဆေးပါ။