Flexbox ဖန်တီးကိရိယာ
flex container နှင့် ၎င်း၏ အိုင်တမ်များကို visual control များဖြင့် သတ်မှတ်ပါ၊ layout ပြောင်းလဲပုံကို တိုက်ရိုက်ကြည့်ရှုပြီး CSS ကို တစ်ချက်နှိပ်ရုံဖြင့် ကူးယူပါ။
သင့် layout ကို သင့်ဘရောက်ဆာထဲတွင် တိုက်ရိုက်တည်ဆောက်ခြင်းဖြစ်သည်။ သင်သတ်မှတ်သမျှကို BroBroGo သို့ တင်ပို့မည်မဟုတ်ပါ။
အမေးအဖြေ
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 များမပါဘဲ အိုင်တမ်များအကြားနှင့် စာကြောင်းများအကြား နေရာလွတ်ကို သတ်မှတ်ပေးသည်။