flex-basis ပိုင်ဆိုင်မှု

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

တိကျသော flex ဘလောက်တစ်ခုအတွက် သက်ရောက်သည်။

ဤပိုင်ဆိုင်မှုသည် အတိုကောက်ပိုင်ဆိုင်မှု flex ၏ အစိတ်အပိုင်းတစ်ခုဖြစ်သည်။

ဝါကျဖွဲ့စည်းပုံ

selector {
	flex-basis: မည်သည့် CSS ယူနစ်များ (နှင့် ရာခိုင်နှုန်းများ) | auto;
}

စံထားသတ်မှတ်ချက်: auto.

ဥပမာ

ကျွန်ုပ်တို့၏ အဓိကဝင်ရိုးသည် ရေပြင်ညီဖြစ်ပြီး၊ flex-basis တွင် 50px ဖိုသတ်မှတ်ချက် ရှိသည်ဆိုပါစို့။ ဤကိစ္စတွင် အစိတ်အပိုင်းများ၏ အကျယ်သည် 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; /* အစိတ်အပိုင်း၏ အရွယ်အစား */
	border: 1px solid green;
}

ဥပမာ

ယခု ဝင်ရိုးကို လှန်ကြည့်ရအောင်၊ flex-basis ပိုင်ဆိုင်မှု၏ ဖိုသတ်မှတ်ချက်ကို မပြောင်းဘဲ။ ဤကိစ္စတွင် အစိတ်အပိုင်းများ၏ အမြင့်သည် 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;
}

ဆက်လက်ဖတ်ရှုရန်

flex-direction ပိုင်ဆိုင်မှု,
သည် flex ဘလောက်များ၏ ဝင်ရိုးဦးတည်ချက်ကို သတ်မှတ်ပေးသည်
justify-content ပိုင်ဆိုင်မှု,
သည် အဓိကဝင်ရိုးအတိုင်း ညှိယူခြင်းကို သတ်မှတ်ပေးသည်
align-items ပိုင်ဆိုင်မှု,
သည် ဖြတ်ဝင်ရိုးအတိုင်း ညှိယူခြင်းကို သတ်မှတ်ပေးသည်
flex-wrap ပိုင်ဆိုင်မှု,
သည် flex ဘလောက်များ၏ မျဉ်းကြောင်းများစွာဖြစ်နိုင်မှုကို သတ်မှတ်ပေးသည်
flex-flow ပိုင်ဆိုင်မှု,
flex-direction နှင့် flex-wrap အတွက် အတိုကောက်
order ပိုင်ဆိုင်မှု,
သည် flex ဘလောက်များ၏ အစဉ်လိုက်ကို သတ်မှတ်ပေးသည်
align-self ပိုင်ဆိုင်မှု,
သည် ဘလောက်တစ်ခုတည်း၏ ညှိယူခြင်းကို သတ်မှတ်ပေးသည်
flex-grow ပိုင်ဆိုင်မှု,
သည် flex ဘလောက်များ၏ လောဘကို သတ်မှတ်ပေးသည်
flex-shrink ပိုင်ဆိုင်မှု,
သည် flex ဘလောက်များ၏ ကျုံ့နိုင်စွမ်းကို သတ်မှတ်ပေးသည်
flex ပိုင်ဆိုင်မှု,
flex-grow, flex-shrink နှင့် flex-basis အတွက် အတိုကောက်