CSS ရှိ Flex Container များအတွင်း အဓိကဝင်ရိုးနှင့် ကန့်လန့်ဝင်ရိုးများ

Flexbox များအကြောင်းကို ဝေါဟာရနှစ်မျိုးဖြင့် ပြောဆိုနိုင်ပါသည်- ပထမတစ်ခုမှာ အတန်း (row) သို့မဟုတ် ကော်လံ (column) ဖြစ်ပြီး၊ ဒုတိယတစ်ခုမှာ ဝင်ရိုး (axis) ဝေါဟာရများဖြင့် ဖြစ်သည်။ အတန်းနှင့် ကော်လံများကို ကျွန်ုပ်တို့ ရှင်းလင်းပြီးဖြစ်ပါသည်။ ယခုအခါ ဝင်ရိုးများအကြောင်း ရှင်းလင်းကြပါစို့။ ဝင်ရိုးများကို နားလည်ခြင်းသည် အစိတ်အပိုင်းများကို အလျားလိုက် (horizontal) သို့မဟုတ် ဒေါင်လိုက် (vertical) နှိုင်းယှဉ်ချိန်ညှိရန် လိုအပ်ပါသည်။

Flex အစိတ်အပိုင်းများနှင့် အလုပ်လုပ်သည့်အခါ အမြဲတမ်း အဓိကဝင်ရိုး (main axis) နှင့် ကန့်လန့်ဝင်ရိုး (cross axis) ရှိပါသည်။ ကျွန်ုပ်တို့သည် အစိတ်အပိုင်းများကို အဓိကဝင်ရိုး တလျှောက်နှင့် အဓိကဝင်ရိုးကို ဖြတ်၍ ချိန်ညှိနိုင်ပါသည်။ အဓိကဝင်ရိုးသည် 4 ဦးတည်ရာအနေအထား ရှိနိုင်သည်- ဘယ်မှ ညာ၊ ညာမှ ဘယ်၊ အပေါ်မှ အောက် နှင့် အောက်မှ အပေါ်။

ကန့်လန့်ဝင်ရိုး ၏ ဦးတည်ရာသည် အဓိကဝင်ရိုး၏ ဦးတည်ရာအပေါ် မူတည်သည်- အကယ်၍ အဓိကဝင်ရိုးသည် အလျားလိုက်ဖြစ်ပါက၊ ကန့်လန့်ဝင်ရိုးသည် အပေါ်မှ အောက်သို့ ဦးတည်ပါသည်။ အကယ်၍ အဓိကဝင်ရိုးသည် ဒေါင်လိုက်ဖြစ်ပါက၊ ကန့်လန့်ဝင်ရိုးသည် ဘယ်မှ ညာသို့ ဦးတည်ပါသည်။ ကန့်လန့်ဝင်ရိုးတွင် အခြားသော ဦးတည်ရာများ မရှိနိုင်ပါ။

အဓိကဝင်ရိုး၏ ဦးတည်ရာကို flex-direction ဂုဏ်သတ္တိဖြင့် ထိန်းညှိပါသည်။ အကယ်၍ ဤဂုဏ်သတ္တိတွင် row တန်ဖိုးရှိပါက - အဓိကဝင်ရိုးသည် ဘယ်မှ ညာသို့ ဦးတည်ပါသည်။ အကယ်၍ တန်ဖိုးသည် row-reverse ဖြစ်ပါက၊ ညာမှ ဘယ်သို့ ဦးတည်ပါသည်။ column တန်ဖိုးသည် ဝင်ရိုးကို အပေါ်မှ အောက်သို့ ဦးတည်စေပြီး၊ column-reverse တန်ဖိုးသည် အောက်မှ အပေါ်သို့ ဦးတည်စေပါသည်။