flex ဂုဏ်သတ္တိ

flex ဂုဏ်သတ္တိသည် flex-basis, flex-shrink နှင့် flex-grow တို့အတွက် အတိုကောက်တစ်ခုဖြစ်သည်။

အသုံးပြုသည်: တိကျသော flex ဘလောက်တစ်ခုအတွက်။

တန်ဖိုး၏ အစီအစဥ်သည် အရေးမကြီးပါ။ ဒုတိယနှင့် တတိယ အကန့်သတ်ချက်များ (flex-shrink, flex-basis) သည် မဖြစ်မနေထည့်ရန် မလိုအပ်ပါ။

တန်ဖိုးများ

သက်ဆိုင်ရာ ဂုဏ်သတ္တိများကို ကြည့်ပါ။

စံထားသော တန်ဖိုး: 0 1 auto.

ဥပမာ

ကျွန်ုပ်တို့တွင် အစိတ်အပိုင်း 3 ခု ရှိသည်ဆိုပါစို့။ ၎င်းတို့ထဲမှ တစ်ခုစီ၏ အကျယ်သည် 200px ဖြစ်ပြီး ပေါင်းလိုက်လျှင် 600px နှင့် ညီပါသည်။ ထိုအရာသည် မိဘထည့်ခွက်၏ အကျယ် 300px နှင့် ညီသော အကျယ်ထက် ပိုကြီးနေပါသည်။ ပထမအစိတ်အပိုင်းအတွက် အကျယ် 200px ဟု သတ်မှတ်ကြပါစို့။ ဒုတိယအစိတ်အပိုင်းအတွက် - 300px၊ တတိယအစိတ်အပိုင်းအတွက် - 100px။ အစိတ်အပိုင်းအားလုံးတွင် flex-basis ၏ တန်ဖိုးသည် 1 နှင့် ညီပါစေ။ ထို့ပြင် flex-shrink ၏ တန်ဖိုးမှာ အစိတ်အပိုင်း၏ အစဉ်လိုက်နံပါတ်နှင့် လိုက်၍ 1, 2, 3 ဖြစ်ပါစေ။

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

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

ဆက်လက်ကြည့်ရှုရန်

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