Flexbox

အရင်တုန်းက CSS နဲ့ Layout ချရတာ တော်တော်လေး ခက်ခဲပါတယ်။ ဒါပေမဲ့ Flexbox ဆိုတဲ့ နည်းပညာ ပေါ်လာတော့မှသာ Element တွေကို ဘယ်ညာ ညှိတာ၊ အလယ်တည့်တည့် ပို့တာတွေက အရမ်းကို လွယ်ကူသွားပါတယ်။ သူက 1D Layout (အတန်းလိုက် သို့မဟုတ် ဒေါင်လိုက် တစ်ဖက်တည်း သွားတဲ့ Layout) တွေ ရေးဆွဲဖို့အတွက် အကောင်းဆုံးပဲ ဖြစ်ပါတယ် ခင်ဗျာ။

Flexbox စသုံးမယ်

Flexbox ကို စသုံးတော့မယ်ဆိုရင် အဓိက Parent Element (Container) မှာ display: flex; လို့ ကြေညာပေးလိုက်ရုံပါပဲ။ အဲဒီလို ကြေညာလိုက်တာနဲ့ အထဲက Children Items တွေက အလိုအလျောက် ဘေးချင်းယှဉ်လျက် ဖြစ်သွားပါလိမ့်မယ်။

.container {
  display: flex;
}

ဝင်ရိုး (၂) ခု — Main Axis နဲ့ Cross Axis

Flexbox ကို သေချာနားလည်ဖို့အတွက် အရေးအကြီးဆုံး အချက်ကတော့ သူ့မှာရှိတဲ့ ဝင်ရိုး (Axis) နှစ်ခု ကို မျက်စိထဲမှာ မြင်ယောင်ထားဖို့ပါပဲ။ နောက်ပိုင်း လေ့လာရမယ့် Property တွေ (ဥပမာ - justify-content, align-items) အားလုံးက ဒီ ဝင်ရိုးတွေအပေါ်မှာပဲ မူတည်ပြီး အလုပ်လုပ်သွားမှာပါ။

Main Axis (ပင်မ ဝင်ရိုး): ဒါက Item တွေကို စီစဉ်ချထားမယ့် အဓိက ဦးတည်ချက်ပါ။ တကယ်လို့ flex-direction: row လို့ ပေးထားရင် ဘေးတိုက် (→) သွားမှာဖြစ်ပြီး၊ column လို့ ပေးထားရင် ဒေါင်လိုက် (↓) သွားမှာ ဖြစ်ပါတယ်။
Cross Axis (ဖြတ်သန်း ဝင်ရိုး): ဒါကတော့ Main Axis ကို ထောင့်မှန် (၉၀ ဒီဂရီ) အနေအထားနဲ့ ဖြတ်သွားတဲ့ နောက်ထပ် ဝင်ရိုးတစ်ခု ဖြစ်ပါတယ်။

Flexbox Main Axis နဲ့ Cross Axis — row နဲ့ column ဖြစ်တဲ့အခါ ဝင်ရိုးများ ပြောင်းလဲပုံ

Container Properties (Parent Element တွင် သုံးရန်)

1. Flex Direction (ဦးတည်ချက်)

အထဲက Item တွေကို ဘယ်ကနေ ညာဘက်ကို စီမလား၊ ဒါမှမဟုတ် အပေါ်ကနေ အောက်ကို စီမလား ဆိုတဲ့ ဦးတည်ချက်ကို သတ်မှတ်ပေးတာပါ။

.container {
  display: flex;
  flex-direction: row; /* (Default) ဘယ်မှ ညာသို့ */
  /* flex-direction: column; (အပေါ်မှ အောက်သို့) */
  /* flex-direction: row-reverse; (ညာမှ ဘယ်သို့ ပြောင်းပြန်) */
  /* flex-direction: column-reverse; (အောက်မှ အပေါ်သို့ ပြောင်းပြန်) */
}

2. Flex Wrap (အောက်တစ်ကြောင်း ဆင်းခြင်း)

Item တွေ အရမ်းများလာပြီး Container ရဲ့ အကျယ်ထက် ကျော်သွားတဲ့အခါ၊ တစ်ကြောင်းတည်းမှာပဲ ကျုံ့ပြီး ကျပ်သိပ်နေစေမလား ဒါမှမဟုတ် နေရာမဆံ့ရင် အောက်တစ်ကြောင်းကို အလိုလို ဆင်းသွားစေမလား ဆိုတာကို သတ်မှတ်တာပါ။

.container {
  display: flex;
  flex-wrap: nowrap; /* (Default) မဆံ့လည်း တစ်ကြောင်းတည်းမှာပဲ နေမယ် (ကျုံ့သွားမယ်) */
  /* flex-wrap: wrap; (မဆံ့ရင် အောက်တစ်ကြောင်း ဆင်းမယ်) */
  /* flex-wrap: wrap-reverse; (အောက်ကနေ အပေါ် ပြန်တက်မယ်) */
}

3. Justify Content (Main Axis ညှိခြင်း)

သူက flex-direction ရဲ့ အနေအထားပေါ် မူတည်ပြီး Item တွေကို Main Axis အတိုင်း ဘယ်လို နေရာချထားမလဲ ဆိုတာကို ဆုံးဖြတ်ပေးတာပါ။ (ဥပမာ - Row ဆိုရင် ဘယ်နဲ့ညာ၊ Column ဆိုရင် အပေါ်နဲ့အောက် နေရာချထားပေးပါတယ်)

.container {
  display: flex;
  justify-content: flex-start; /* (Default) အစဘက် ကပ်မယ် */
  /* justify-content: flex-end; (အဆုံးဘက် ကပ်မယ်) */
  /* justify-content: center; (အလယ်တည့်တည့်) */
  /* justify-content: space-between; (ဘယ်ညာ ကပ်ပြီး ကြားထဲမှာ နေရာခွဲမယ်) */
  /* justify-content: space-around; (ဘေးဘက်တွေမှာပါ နေရာခွဲမယ်) */
  /* justify-content: space-evenly; (နေရာလွတ် အားလုံး တူညီမယ်) */
}

4. Align Items (Cross Axis ညှိခြင်း)

သူကကျတော့ Main Axis နဲ့ ထောင့်မှန်ကျနေတဲ့ Cross Axis (ဆန့်ကျင်ဘက် ဝင်ရိုး) ပေါ်မှာ Item တွေကို ဘယ်လို နေရာချမလဲ ဆုံးဖြတ်ပေးတာပါ။ (ဥပမာ - Row ဖြစ်နေရင် အပေါ်အောက် နေရာချပေးပြီး၊ Column ဖြစ်နေရင် ဘယ်ညာ နေရာချပေးပါတယ်)

.container {
  display: flex;
  height: 200px;
  align-items: stretch; /* (Default) အပြည့် ဆွဲဆန့်မယ် */
  /* align-items: flex-start; (အပေါ် ကပ်မယ်) */
  /* align-items: flex-end; (အောက် ကပ်မယ်) */
  /* align-items: center; (အလယ်တည့်တည့်) */
  /* align-items: baseline; (စာသား မျဉ်းကြောင်းအတိုင်း ညှိမယ်) */
}

5. Gap (ကွာဟချက်)

Item တစ်ခုနဲ့ တစ်ခုကြားမှာ အကွာအဝေး (Space) ထည့်ချင်ရင် သုံးပါတယ်။ ဒါကို သုံးလိုက်ရင် အရင်လို margin တွေ လိုက်ထည့်နေစရာ မလိုတော့ပါဘူး။

.container {
  display: flex;
  gap: 10px; /* Item တွေကြား 10px ကွာမယ် */
  /* gap: 10px 20px; (Row gap 10px, Column gap 20px) */
}

Item Properties (Child Element များတွင် သုံးရန်)

Flexbox မှာဆိုရင် အပြင်က Container ကြီးမှာ သတ်မှတ်ရတဲ့ Property တွေအပြင်၊ အထဲမှာရှိတဲ့ Item သေးသေးလေးတွေ တစ်ခုချင်းစီမှာ သီးသန့် ခွဲပြီး သတ်မှတ်လို့ရတဲ့ Property တွေလည်း ရှိပါတယ် ခင်ဗျာ။

1. Flex Grow (နေရာလွတ် ယူခြင်း)

Container အထဲမှာ နေရာလွတ်တွေ ကျန်နေသေးရင်၊ ဒီ Item အနေနဲ့ အဲဒီနေရာလွတ်ကို ဘယ်လောက် အချိုးကျ ပိုယူမလဲ ဆိုတာကို သတ်မှတ်တာပါ။

.item {
  flex-grow: 1; /* ရှိသမျှ နေရာလွတ်ကို ယူမယ် */
  /* flex-grow: 0; (Default - မယူဘူး) */
}

2. Flex Shrink (ကျုံ့ခြင်း)

Container အထဲမှာ နေရာတွေ အရမ်းကျပ်လာတဲ့အခါ (မဆံ့တော့တဲ့အခါ) ဒီ Item က ဘယ်လောက် အချိုးကျ ပြန်ကျုံ့သွားမလဲ ဆိုတာကို သတ်မှတ်တာပါ။

.item {
  flex-shrink: 1; /* (Default) နေရာမဆံ့ရင် ကျုံ့မယ် */
  /* flex-shrink: 0; (လုံးဝ မကျုံ့ဘူး - Size အတိုင်း နေမယ်) */
}

3. Flex Basis (မူလ အရွယ်အစား)

Item ရဲ့ မူလ စတင်ယူမယ့် အရွယ်အစား (Size) က ဘယ်လောက်လဲ ဆိုတာကို သတ်မှတ်တာပါ။ (သူက ပုံမှန် width သတ်မှတ်တဲ့ သဘောတရားနဲ့ တော်တော်လေး ဆင်တူပါတယ်)

.item {
  flex-basis: auto; /* (Default) Content အတိုင်း */
  /* flex-basis: 200px; (200px ယူမယ်) */
}

4. Flex (Shorthand)

ဒီ Property ကတော့ အပေါ်က ပြောခဲ့တဲ့ flex-grow, flex-shrink, နဲ့ flex-basis ၃ ခုလုံးကို တစ်ကြောင်းတည်း ပေါင်းရေးလိုက်တဲ့ အတိုကောက် နည်းလမ်းပါ။ လက်တွေ့မှာလည်း သူတို့ကိုပဲ အသုံးအများဆုံး ဖြစ်ပါတယ်။

.item {
  flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0% */
  /* flex: initial; (0 1 auto) - Default */
  /* flex: none; (0 0 auto) - မကြီးဘူး၊ မကျုံ့ဘူး */
}

5. Align Self (သီးသန့် နေရာယူခြင်း)

Container ကြီးက သတ်မှတ်ထားတဲ့ align-items စည်းမျဉ်းကို မလိုက်နာဘဲ၊ ဒီ Item တစ်ခုတည်းကိုပဲ သီးသန့် နေရာချထားချင်တဲ့အခါမျိုးမှာ အသုံးပြုပါတယ်။

.item-special {
  align-self: flex-end; /* တခြားသူတွေ ဘယ်လိုနေနေ ကိုယ်က အောက်ဆုံးမှာ နေမယ် */
}

6. Order (အစီအစဉ်)

Item တွေရဲ့ အစီအစဉ်ကို မိမိစိတ်ကြိုက် အရှေ့အနောက် ပြောင်းချင်တဲ့အခါမှာ သုံးပါတယ်။ (ဒီကောင်ရဲ့ အားသာချက်က HTML Code တွေကို သွားပြင်စရာမလိုဘဲ CSS ကနေပဲ နေရာတွေ အလွယ်တကူ ရွှေ့ပြောင်းလို့ ရတာပါပဲ)

.item {
  order: 1; /* ဂဏန်း ငယ်ရင် ရှေ့ရောက်မယ်၊ ကြီးရင် နောက်ရောက်မယ် */
  /* Default က 0 ပါ */
}

အလယ်တည့်တည့် ပို့နည်း (Holy Grail): Element တစ်ခုကို Screen ရဲ့ အလယ်တည့်တည့် (Center) ကို အလွယ်ကူဆုံး ပို့ချင်တယ်ဆိုရင်တော့ အောက်က Code လေးကိုသာ အသုံးပြုလိုက်ပါ ခင်ဗျာ။

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
}