CSS flex model တွင် တစ်ဦးချင်းအချက်အလက်များကို ညှိခြင်း

ယခုလေ့လာမည့် ဂုဏ်သတ္တိများကို flex အချက်အလက်များ၏ မိဘထံ သတ်မှတ်ခြင်းမဟုတ်ဘဲ အချက်အလက်၏ကိုယ်တိုင် သတ်မှတ်သည်။ အချို့သောဘလော့ခ်ကို ထောင့်ဖြတ်ဝင်ရိုးတလျှောက် ညှိပေးသော align-self ဂုဏ်သတ္တိကို လေ့လာကြပါစို့။

တန်းတစ်ခုအတွင်း စီထားသော flex ဘလော့ခ်များ ရှိသည်ဆိုကြပါစို့။ ဒါတွေကို ဒေါင်လိုက်ဗဟိုချက်နဲ့ ညှိဖို့ align-items ကို center တန်ဖိုးသတ်မှတ်ပါ၊ ဒုတိယအချက်အလက်ကို elem ဆိုတဲ့ အပိုအတန်းအမည် ထပ်ပေးပြီး သူ့အတွက် မတူညီတဲ့ညှိချက်တစ်ခု သတ်မှတ်ပါ၊ ဥပမာ၊ သူ့ကို အပေါ်ဆုံးအစွန်းနဲ့ ကပ်လိုက်ပါ။

ဒီအတွက် ကျွန်ုပ်တို့၏ elem အတန်းအမည်ရှိသော အချက်အလက်ကို align-self ဂုဏ်သတ္တိကို flex-start တန်ဖိုးသတ်မှတ်ပါမည် -

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

.parent {
	display: flex;
	align-items: center;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}
.elem {
	align-self: flex-start;
}

ဤပုံစံအတိုင်း စာမျက်နှာကို ပြန်လုပ်ပါ -