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

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

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

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

html<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>

css.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;
}

Результат: