CSS Flexbox ဖန်တီးကိရိယာဖြင့် Layout တည်ဆောက်ခြင်း
CSS Flexbox သည် ဝဘ်စာမျက်နှာများပေါ်တွင် အိုင်တမ်များကို စနစ်တကျ နေရာချထားရန်နှင့် အချိုးကျ စီးဆင်းစေရန် အသုံးပြုသည့် အစွမ်းထက် စနစ်တစ်ခုဖြစ်သည်။ ဤ Flexbox ဖန်တီးကိရိယာသည် flex container တစ်ခုနှင့် ၎င်း၏ အိုင်တမ်များကို visual control များဖြင့် သတ်မှတ်ရန်၊ layout ပြောင်းလဲပုံကို တိုက်ရိုက်ကြည့်ရှုရန်နှင့် ထွက်ပေါ်လာသော CSS ကုဒ်များကို အလွယ်တကူ ကူးယူအသုံးပြုရန် ကူညီပေးသည်။
ဤကိရိယာကို အသုံးပြုခြင်းဖြင့် အောက်ပါအကျိုးကျေးဇူးများကို ရရှိနိုင်ပါသည် -
- CSS flexbox layout တစ်ခုကို အမြင်အာရုံဖြင့် တိုက်ရိုက်ပုံဖော်တည်ဆောက်နိုင်ခြင်း။
- flex container နှင့် ၎င်း၏ အိုင်တမ်များအတွက် လိုအပ်သော CSS ကုဒ်များကို လျင်မြန်စွာ ထုတ်ယူနိုင်ခြင်း။
- မတူညီသော flexbox property များက layout အပေါ် မည်သို့သက်ရောက်မှုရှိသည်ကို လက်တွေ့လေ့လာနိုင်ခြင်း။
- အလယ်တည့်တည့်ချခြင်း၊ လမ်းညွှန်ဘား၊ အိုင်တမ်များ ဆင့်စီခြင်း၊ ကတ်ပုံစံများနှင့် ဘေးဘား layout များကဲ့သို့ အသုံးများသော ပုံစံများကို ဖန်တီးနိုင်ခြင်း။
ကွန်တိန်နာ (Container) ဆက်တင်များ သတ်မှတ်ခြင်း
Flexbox layout တစ်ခု၏ အခြေခံမှာ ကွန်တိန်နာ (Container) ဖြစ်သည်။ ဤကိရိယာတွင် အောက်ပါ container property များကို စိတ်ကြိုက်ပြောင်းလဲနိုင်သည် -
- ဦးတည်ချက် (Direction): အိုင်တမ်များ စီးဆင်းမည့် လမ်းကြောင်းကို သတ်မှတ်သည်။ ရွေးချယ်စရာများမှာ အတန်း (Row)၊ အတန်း ပြောင်းပြန် (Row reverse)၊ ကော်လံ (Column) နှင့် ကော်လံ ပြောင်းပြန် (Column reverse) တို့ ဖြစ်သည်။ ဦးတည်ချက်ကို row မှ column သို့ ပြောင်းလဲလိုက်ပါက main axis နှင့် cross axis တို့သည် နေရာချင်းလဲလှယ်သွားမည်ဖြစ်ပြီး
justify-contentနှင့်align-itemsအလုပ်လုပ်ပုံကို တိုက်ရိုက်သက်ရောက်မှုရှိစေသည်။ - ထုပ်ပိုးခြင်း (Wrap): အိုင်တမ်များကို စာကြောင်းတစ်ကြောင်းတည်းတွင် အတင်းထည့်သွင်းမည် သို့မဟုတ် လိုင်းခွဲမည်ကို ဆုံးဖြတ်သည်။ မထုပ်ပိုးပါ (No wrap) ကို ရွေးချယ်ပါက အိုင်တမ်အားလုံးကို စာကြောင်းတစ်ကြောင်းတည်းတွင်သာ အတင်းထည့်သွင်းထားမည်ဖြစ်သည်။ ထုပ်ပိုးခြင်း (Wrap) သို့မဟုတ် ပြောင်းပြန် ထုပ်ပိုးခြင်း (Wrap reverse) ကို ရွေးချယ်ပါက ဆံ့ခြင်းမရှိတော့သော အိုင်တမ်များသည် နောက်စာကြောင်းသို့ ဆင်းသွားမည်ဖြစ်သည်။
- အကြောင်းအရာ ညီညာစေရန် (Justify content): အဓိကဝင်ရိုး (main axis) ပေါ်တွင် အိုင်တမ်များကို နေရာချပေးသည်။ ရွေးချယ်စရာများမှာ အစ (Start)၊ အဆုံး (End)၊ အလယ် (Center)၊ ကြားထဲတွင် နေရာလွတ် (Space between)၊ ပတ်ပတ်လည် နေရာလွတ် (Space around) နှင့် ညီတူညီမျှ နေရာလွတ် (Space evenly) တို့ ဖြစ်သည်။
- အရာဝတ္ထုများ ညှိရန် (Align items): ကန့်လန့်ဖြတ်ဝင်ရိုး (cross axis) ပေါ်တွင် အိုင်တမ်များကို နေရာချပေးသည်။ ရွေးချယ်စရာများမှာ အစ (Start)၊ အဆုံး (End)၊ အလယ် (Center)၊ ဆန့်ထုတ်ရန် (Stretch) နှင့် အခြေခံမျဉ်း (Baseline) တို့ ဖြစ်သည်။
- အကြောင်းအရာ ညှိရန် (Align content): wrapping စနစ်ဖွင့်ထားပြီး အိုင်တမ်များ စာကြောင်းအများအပြား ဖြစ်ပေါ်လာချိန်တွင် ထိုစာကြောင်းများကို အစုအဖွဲ့လိုက် နေရာချပေးသည်။ ရွေးချယ်စရာများမှာ အစ (Start)၊ အဆုံး (End)၊ အလယ် (Center)၊ ဆန့်ထုတ်ရန် (Stretch)၊ ကြားထဲတွင် နေရာလွတ် (Space between)၊ ပတ်ပတ်လည် နေရာလွတ် (Space around) နှင့် ညီတူညီမျှ နေရာလွတ် (Space evenly) တို့ ဖြစ်သည်။
- ကြားအကွာအဝေး (Gap): အိုင်တမ်များအကြားနှင့် စာကြောင်းများအကြား ခြားထားမည့် ကိန်းဂဏန်းတန်ဖိုးကို သတ်မှတ်ပေးသည်။
အိုင်တမ်များ ၏ ဂုဏ်သတ္တိများကို ထိန်းချုပ်ခြင်း
ကွန်တိန်နာအတွင်းရှိ အိုင်တမ်တစ်ခုချင်းစီအတွက် သီးခြား property များကိုလည်း စိတ်ကြိုက်ပြင်ဆင်နိုင်သည်။ "အိုင်တမ်အသစ်ထည့်ရန်" ခလုတ်ကို နှိပ်လိုက်ပါက "Item 5" ကဲ့သို့သော အိုင်တမ်အသစ်တစ်ခု ပေါ်လာမည်ဖြစ်သည်။ အိုင်တမ်တစ်ခုချင်းစီအတွက် အောက်ပါတို့ကို သတ်မှတ်နိုင်သည် -
- အစီအစဉ် (Order): HTML ကုဒ်ကို မထိခိုက်စေဘဲ မျက်နှာပြင်ပေါ်တွင် အိုင်တမ်များ ပြသမည့် အစီအစဉ် ကိန်းဂဏန်းတန်ဖိုးကို သတ်မှတ်သည်။
- ချဲ့ရန် (Grow): ကွန်တိန်နာအတွင်း နေရာလွတ်ကျန်ရှိပါက အိုင်တမ် မည်မျှ ကြီးထွားလာမည်ကို သတ်မှတ်သည့် ကိန်းဂဏန်းတန်ဖိုး ဖြစ်သည်။
- ကျုံ့ရန် (Shrink): နေရာကျဉ်းသွားပါက အိုင်တမ် မည်မျှ ကျုံ့သွားမည်ကို သတ်မှတ်သည့် ကိန်းဂဏန်းတန်ဖိုး ဖြစ်သည်။
- အခြေခံ (Basis): အိုင်တမ်၏ အစပြုအရွယ်အစားကို သတ်မှတ်ရန် ကိန်းဂဏန်းတန်ဖိုး သို့မဟုတ် "Auto" ကို အသုံးပြုသည်။
- ကိုယ်တိုင်ညှိရန် (Align self): ကွန်တိန်နာ၏ align-items သတ်မှတ်ချက်ကို ကျော်လွန်ပြီး အိုင်တမ်တစ်ခုတည်းအတွက် သီးခြား cross-axis alignment ကို သတ်မှတ်သည်။ ရွေးချယ်စရာများမှာ အလိုအလျောက် (Auto)၊ အစ (Start)၊ အဆုံး (End)၊ အလယ် (Center)၊ ဆန့်ထုတ်ရန် (Stretch) နှင့် အခြေခံမျဉ်း (Baseline) တို့ ဖြစ်သည်။
အိုင်တမ်များ၏ property များကို ပြောင်းလဲလိုက်သည့်အခါ အမှန်တကယ် ပြောင်းလဲမှုပြုလုပ်ထားသော အိုင်တမ်များအတွက်သာ သီးခြား CSS rules များကို ထုတ်ပေးမည်ဖြစ်သည်။
အဆင်သင့်ပုံစံများ
အသုံးများသော layout ပုံစံများကို လျင်မြန်စွာ စမ်းသပ်နိုင်ရန် အောက်ပါ အဆင်သင့်ပုံစံများ ကို ထည့်သွင်းပေးထားသည် -
- အလယ် (Center): အရာဝတ္ထုများကို ကွန်တိန်နာ၏ အလယ်တည့်တည့်တွင် နေရာချရန်။
- လမ်းညွှန်ဘား (Navbar): ဝဘ်ဆိုက်၏ ထိပ်ပိုင်း လမ်းညွှန် menu များအတွက်။
- ဆင့်စီခြင်း (Stack): အိုင်တမ်များကို တစ်ခုပေါ်တစ်ခု ဒေါင်လိုက်ဆင့်စီရန်
- ကတ်များ (Cards): အချက်အလက်များကို ကတ်ပြားပုံစံများဖြင့် ဘေးတိုက်စီရန်။
- ဘေးဘား (Sidebar): ပင်မအကြောင်းအရာနှင့် ဘေးဘားကို တွဲဖက်နေရာချရန်။
ကိုယ်ရေးအချက်အလက် လုံခြုံမှုနှင့် လုပ်ဆောင်ပုံစံ
သင့် layout ကို သင့်ဘရောက်ဆာထဲတွင် တိုက်ရိုက်တည်ဆောက်ခြင်းဖြစ်သည်။ သင်သတ်မှတ်သမျှကို BroBroGo သို့ တင်ပို့မည်မဟုတ်ပါ။
အမေးနှင့်အဖြေများ (FAQ)
justify-content နှင့် align-items တို့၏ ကွာခြားချက်မှာ အဘယ်နည်း။
Justify-content သည် အဓိကဝင်ရိုး (main axis) — row သို့မဟုတ် column စီးဆင်းရာ လမ်းကြောင်း — အတိုင်း အိုင်တမ်များကို နေရာချပေးပြီး၊ align-items သည် ၎င်းနှင့် ကန့်လန့်ဖြတ်ဝင်ရိုး (cross axis) ပေါ်တွင် နေရာချပေးသည်။ လမ်းကြောင်းကို row မှ column သို့ ပြောင်းလိုက်ပါက ဝင်ရိုးနှစ်ခုသည် နေရာချင်းလဲသွားမည်ဖြစ်သောကြောင့် justify-content သည် အပေါ်မှအောက်သို့ စတင်အလုပ်လုပ်ပြီး align-items သည် ဘယ်မှညာသို့ အလုပ်လုပ်မည်ဖြစ်သည်။
အိုင်တမ်တစ်ခုချင်းစီ၏ ထိန်းချုပ်မှုများသည် မည်သို့အလုပ်လုပ်သနည်း။
အိုင်တမ်တစ်ခုကို ၎င်း၏နံပါတ်ဖြင့် ရွေးချယ်ပြီးနောက် နေရာလွတ်များကို ဖြည့်ရန် မည်မျှကြီးထွားမည် (grow)၊ နေရာကျဉ်းသောအခါ မည်မျှကျုံ့မည် (shrink)၊ ၎င်း၏အစပြုအရွယ်အစား (basis) နှင့် ၎င်း၏ကိုယ်ပိုင် cross-axis alignment တို့ကို သတ်မှတ်ပါ။ Order သည် HTML ကို မထိခိုက်စေဘဲ မျက်နှာပြင်ပေါ်တွင် အိုင်တမ်တစ်ခုကို ရှေ့ သို့မဟုတ် နောက်သို့ ရွှေ့ပေးသည်။ သင်အမှန်တကယ် ပြောင်းလဲလိုက်သော အိုင်တမ်များသာ CSS တွင် ကိုယ်ပိုင်စည်းမျဉ်း ရရှိမည်ဖြစ်သည်။
wrap နှင့် align-content တို့သည် မည်သည့်အချိန်တွင် အရေးပါသနည်း။
Wrapping ကို ပိတ်ထားပါက အိုင်တမ်အားလုံးကို စာကြောင်းတစ်ကြောင်းတည်းတွင်သာ အတင်းထည့်သွင်းထားမည်ဖြစ်ပြီး ပိုမိုကျဉ်းမြောင်းသွားနိုင်သည်။ ၎င်းကို ဖွင့်လိုက်ပါက ဆံ့ခြင်းမရှိတော့သော အိုင်တမ်များသည် နောက်စာကြောင်းသို့ ဆင်းသွားမည်ဖြစ်သည် — ထိုအခါတွင် align-content က စာကြောင်းများကို အစုအဖွဲ့လိုက် နေရာချပေးမည်ဖြစ်သည်။ Gap သည် margin များမပါဘဲ အိုင်တမ်များအကြားနှင့် စာကြောင်းများအကြား နေရာလွတ်ကို သတ်မှတ်ပေးသည်။
CSS ကုဒ်ကို မည်သို့ရယူရမည်နည်း။
ကိရိယာပေါ်တွင် layout ကို စိတ်ကြိုက်ပြင်ဆင်ပြီးပါက "CSS ကူးယူရန်" ခလုတ်ကို နှိပ်ပါ။ ထိုအခါ ခလုတ်၏အခြေအနေသည် "ကူးယူပြီး" ဟု ပြောင်းလဲသွားမည်ဖြစ်ပြီး သင့် clipboard ထဲသို့ ကုဒ်များ ရောက်ရှိသွားမည်ဖြစ်သည်။