Code With Nora

Code With Nora Hello World! Here I share coding tips and tricks

Feels so sharp 🥹
03/12/2023

Feels so sharp 🥹

Align Content Vs Align Items 🤔-----------------------------------------------အခုမှ CSS စလေ့လာမယ့် သူတွေ မှားလေ့မှားထရှိ...
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 သိသလောက် ရှင်းပြပေးမှာမို လာမေးလိုရပါတယ်ရှင့် 😊



ဒီနေ့ တော့ Nora က Flex-box ရဲ့ Main Axis နဲ့ Cross Axis အ ကြောင်းကို ရှင်းပြပေးထားပါတယ် နော် 😊=========================...
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 သိသလောက် ရှင်းပြပေးမှာမို လာမေးလိုရပါတယ်ရှင့် 😊



20/11/2023

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 က အလုပ်လုပ်မှာဖြစ်ပါတယ်။

Hello Everyone! Nora ဒီ page ​လေးမှာ Coding နဲ့ ပတ်သတ်တဲ့ short tutorial ​လေး​တွေ share ​ပေးသွားမှာပါ like and follow လု...
18/11/2023

Hello Everyone! Nora ဒီ page ​လေးမှာ Coding နဲ့ ပတ်သတ်တဲ့ short tutorial ​လေး​တွေ share ​ပေးသွားမှာပါ like and follow လုပ်​ပေးကြပါဦးရှင့်

Address

Yangon

Website

Alerts

Be the first to know and let us send you an email when Code With Nora posts news and promotions. Your email address will not be used for any other purpose, and you can unsubscribe at any time.

Shortcuts

Share

Category