Code With Nora
Share
03/12/2023
Feels so sharp 🥹
27/11/2023
Align Content Vs Align Items 🤔
-----------------------------------------------
အခုမှ CSS စလေ့လာမယ့် သူတွေ မှားလေ့မှားထရှိတဲ့ Align-content property နဲ့ Align-items property နှစ်ခု အကြောင်း ကို ရှင်းပြပေးထားပါတယ်။😊
Align-Items Property ✅
သူက Parents element တစ်ခုထဲမှာ တစ်ခု ( သိုမဟုတ် ) တစ်ခုထပ်ပိုသော Child elements တွေကို Cross Axis မှာရွေ့ဖို အသုံးပြုရပါတယ် 💡
( Main Axis နဲ့ Cross Axis အကြောင်းကို Nora အရင် post မှာ ရှင်းပြပေးထားပါတယ်✌️ )
➡️ ၁ ။ Parent element နှင့် Child element များကို width နဲ့ height သတ်မှတ် ပေးပါ။
➡️ ၂ ။ Parent element တွင် flex-box ထဲထည့်ရန် display : flex ကို အသုံးပြုပါ။
➡️ ၃ ။ Nora က လက်ရှိပုံမှာ ဒေါင်လိုက်လိုချင်တာ ဖြစ်တဲ့အတွက် flex-direction ကို column ပြောင်းထားပါတယ်။ Main Axis က ဒေါင်လိုက်ဖြစ်ပြီး Cross Axis က အလျားလိုက် ဖြစ်သွားမှာပါ။
➡️ ၄ ။ Main Axis တွင် center ဖြစ်စေရန် justify-content : center ကို အသုံးပြုပါ။
➡️ ၅ ။ Cross Axis တွင် center ဖြစ်စေရန် align-items : center ကို အသုံးပြုပါ။
ဒါဆိုရင် တော့ Child element က Parent element ရဲ့ အလည်ဗဟို တည့်တည့်မှာ သွားစုမှာဖြစ်ပါတယ်။🫶
Align-Content Property ✅
Cross axis မှာ Child element တွေရဲ့ Total height က Parent element ရဲ့ height ထပ်များ နေတဲ့အခါ flex-wrap ကို အသုံးပြုရပါတယ်။
flex wrap ကြောင့် Child element တွေ height အပြည့်ဖြစ်ပြီး နောက်မှာ သူတိုကို Cross Axis မှာ ပြန်စီဖို Align-content property ကို အသုံးပြုရပါတယ်။💡
➡️ ၁-၄ ။ အဆင့် ၁ ကနေ ၄ အထိက တူပါတယ်။ Parent height နေရာမှာ Child element တွေ အကုန်မဆန့်တော့အောင် 200 px ကိုပြောင်းထားပါတယ်။
➡️ ၅ ။ လက်ရှိ အခြေအနေမှာ display : flex property ကြောင့် Parent ရဲ့ height ကို အညီအမျှခွဲ ဝေရမှာဖြစ်တဲ့အတွက် Child element တွေရဲ့ height က ပေးထားတဲ့ height ထပ် နည်းနေမှာ ဖြစ်ပါတယ်။
( ဥပမာ ပုံမှာ Nora က တစ်ခု 50px စီ ပေးထား ပေမဲ့ parent height က 200px ပဲရှိတာမို 200px ကို 7 ခု အညီအမျှခွဲယူရမှာဖြစ်ပါတယ်။ )
➡️ ၆ ။ ဒီလိုအခြေ အနေမျိုးမှာ Child element တွေရဲ့ Original height 50px ပြန်ရဖိုအတွက် flex-wrap : wrap property ကိုအသုံးပြုရပါတယ်။ Child element တွေဟာ Main Axis အတိုင်း အစဥ်လိုက်စီသွားပြီး မဆန့် တော့တဲ့အခါမှာ ဘေးကနေ နောက်တစ်တန်းအနေနဲ့ထပ်စီမှာ ဖြစ်ပါတယ်။
➡️ ၇ ။ ဒီ Child element တွေကို Cross Axis မှာ နေရာချနိုင်ဖိုအတွက် Align-content property ကို အသုံးပြုရပါတယ်။ Nora က တော့ အလည်ဗဟိုကို ရွှေ့ချင်တာဖြစ်တဲ့အတွက် Center ကို အသုံးပြုထားပါတယ်။
✌တခြား space-around, space-evenly အစရှိတဲ့ property တွေကိုလဲ စမ်းကြည့်ကြည့်ဖို Nora က အကြံပေးပါတယ်။ 🫶
Nora က အခုလို အများစု ရောနိုင်တဲ့ အ ကြောင်းအရာ လေး တွေကို စနစ်တကျ ရှင်းပြ ပေးသွားမှာမို Page ကို like and follow လေး လုပ်ခဲ့ဖို မမေ့နဲ့ဦး နော် 🥳
သိချင်တာလေးတွေ ရှိရင်လဲ Nora သိသလောက် ရှင်းပြပေးမှာမို လာမေးလိုရပါတယ်ရှင့် 😊
24/11/2023
ဒီနေ့ တော့ Nora က Flex-box ရဲ့ Main Axis နဲ့ Cross Axis အ ကြောင်းကို ရှင်းပြပေးထားပါတယ် နော် 😊
=========================
Main Axis နဲ့ Cross Axis ဆိုတာ Flex-box ကို သုံးပြီးတော့ element တွေကို နေရာချတဲ့ အခါမှာ အသုံးပြုရတဲ့ Axis နစ်ခုဖြစ်ပါတယ်။ ဒီ Axis နစ်ခုက flex-direction ဆိုတဲ့ property ပေါ်မှာ မူတည်ပြီး အောက်ပါအတိုင်း ကွဲပြားသွားပါတယ်။➡️⬆️
✅ Flex-direction တန်ဖိုးကို Row အဖြစ်ထားတဲ့အခါမှာ Main Axis က ဘယ်ဖက်က နေ ညာဖက် ကို သွားမှာဖြစ်ပါတယ်။ သူက default flex-direction တန်ဖိုးလည်း ဖြစ်ပါတယ်။
✅ Flex-direction တန်ဖိုးကို Row-reverse ထားတဲ့အခါမှာ Main Axis က ညာဖက်က နေ ဘယ်ဖက်ကို ပြောင်းပြန် သွားမှာဖြစ်ပါတယ်။
✅ Flex-direction တန်ဖိုးကို Column ပြောင်းလိုက်တဲ့အခါမှာ Main Axis က ဒေါင်လိုက် အ ပေါ်က နေ အောက်ကို သွားမှာဖြစ်ပါတယ်။ ထိုအချိန်မှာ Cross Axis က အလျားလိုက် ဖြစ်သွားမှာပါ။
✅ Flex-direction တန်ဖိုးကို Column-reverse ထားလိုက်တဲ့အခါမှာ Main Axis က ဒေါင်လိုက် အောက်က နေ အ ပေါ်ကို ပြောင်းပြန်သွားမှာ ဖြစ်ပါတယ်။
Nora က အခုလို အများစု ရောနိုင်တဲ့ အကြောင်းအရာလေး တွေကို စနစ်တကျ ရှင်းပြ ပေးသွားမှာမို Page ကို like and follow လေး လုပ်ခဲ့ဖို မမေ့နဲ့ဦးနော် 🥳
သိချင်တာလေးတွေ ရှိရင်လဲ Nora သိသလောက် ရှင်းပြပေးမှာမို လာမေးလိုရပါတယ်ရှင့် 😊
Meme တွေထဲကလို How To Center A Div ကို google ခေါက်စရာ မလို အောင် လွယ်လွယ်ကူကူမှတ်ရမယ့်နည်းကို Nora က ဖော်ပြ ပေးလိုက်ပါတယ်🥳🥳🥳
===========================================
1. Parent div နဲ့ ကိုယ် center လုပ်ချင်တဲ့ element ( child div ) ကို width နဲ့ height သတ်မှတ် ပေးရပါမယ်။
2. Parent div မှာ ပုံမှာ ပေးထားတဲ့ property တွေ ထည့် ပေးပါမယ်။
3. Parent elementမှာ Display flex ထည့် ပေးခြင်းက child element တွေကို flex-box ထဲ ထည့် ပေးမှာ ဖြစ်ပြီး တော့
4. justify-content က main axis (လက်ရှိအလျားလိုက်) မှာ center ကို ရွေ့ ပေးမှာ ဖြစ်ပါတယ်။
5. Align Items က cross-axis ( လက်ရှိ ဒေါင်လိုက် ) မှာ center ကို ရွေ့ ပေးမှာ ဖြစ်ပါတယ်။
6. အရေးကြီးဆုံး အချက်က Parent element မှာ တိကျတဲ့ height ရှိရပါမယ်။ ဒါမှ align-items property က အလုပ်လုပ်မှာဖြစ်ပါတယ်။
18/11/2023
Hello Everyone! Nora ဒီ page လေးမှာ Coding နဲ့ ပတ်သတ်တဲ့ short tutorial လေးတွေ share ပေးသွားမှာပါ like and follow လုပ်ပေးကြပါဦးရှင့်
Click here to claim your Sponsored Listing.
