Flexbox Intro

Flexbox က row သို့မဟုတ် column တစ်ကြောင်းတည်းအတွင်း items တွေကို align/distribute လုပ်ဖို့အကောင်းဆုံး layout system ပါ။ Navigation bar, button group, card row, form controls, center alignment တွေမှာအရမ်းအသုံးများပါတယ်။ Flexbox ကိုသိသွားရင် “ဒီ box ကို အလယ်တည့်တည့်ထားချင်တာလေးပဲ” ဆိုတဲ့ပြဿနာတွေ အများကြီးဖြေရှင်းနိုင်ပါတယ်။

.center-box {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  min-height: 300px;
}

Container ထဲက item က horizontal ရော vertical ရော အလယ်တည့်တည့်မှာနေပါမယ်။