Design

Flexbox Property

အားလုံးပဲ မဂၤလာပါရွင့္။
ညီမကေတာ့ Spiceworks Myanmar မွာ Web Designer အေနနဲ႔ ဝင္ေရာက္လုပ္ကိုင္ေနတဲ့ ခင္ရတနာေအာင္ ျဖစ္ပါတယ္ရွင့္။ ဒီတစ္ပတ္ ညီမ မွ်ေဝေပးခ်င္တဲ့ အေၾကာင္းအရာကေတာ့ Flexbox property အေၾကာင္း ျဖစ္ပါတယ္။

Flexbox property ေတြကို အသုံးျပဳမယ္ဆို display: flex; ဆိုၿပီး အရင္ေၾကညာရပါမယ္။

flex-wrap property မွာ wrap နဲ႔ nowrap ဆိုၿပီး value ေတြ ရွိပါတယ္။ flex-wrap: nowrap; ဆိုၿပီး အသုံးျပဳမယ္ဆို component ေတြကို line တစ္ခုေပၚမွာဘဲ ဆန႔္ေအာင္ ေနရာခ်ထားမွာ ျဖစ္ပါတယ္။
flex-wrap: warp; ဆိုရင္ေတာ့ component ေတြရဲ႕ width/height အတိုင္း ေနရာယူၿပီး one line နဲ႔ ေနရာမေလာက္ေတာ့တဲ့အခ်ိန္မွာ ေအာက္တစ္ေၾကာင္း ဆင္းသြားမွာ ျဖစ္ပါတယ္။

flex-direction ကေတာ့ component ေတြကို horizontally ေနရာခ်မလား၊ vertically ေနရာခ်မလား သတ္မွတ္တဲ့အခ်ိန္မွာ အသုံးျပဳပါတယ္။ component ေတြကို horizontally ေနရာခ်မယ္ဆိုရင္ flex-direction: row; ကို အသုံးျပဳၿပီး vertically ေနရာခ်မယ္ဆိုရင္ေတာ့ flex-direction: column; ကို အသုံးျပဳပါတယ္။ flex-direction မွာ row, column အျပင္ row-reverse, column-reverse ဆိုၿပီး အသုံးျပဳလို႔ ရပါတယ္။ row-reverse မွာ component ေတြကို right to left ေနရာခ်ထားၿပီး column-reverse မွာဆိုရင္ေတာ့ component ေတြကို bottom to top ေနရာခ်ထားပါတယ္။

ေနာက္ပိုင္းရွင္းျပမယ့္ properties ထဲမွာ cross-axis ကို အသုံးျပဳရွင္းျပမွာျဖစ္လို႔ flex-direction နဲ႔ တြဲၿပီး main-axis နဲ႔ cross-axis ကို ရွင္းျပခ်င္ပါတယ္။ flex-direction ကို row ေပးထားမယ္ဆိုရင္ သူ႔ရဲ႕ cross-axis က column ျဖစ္ပါတယ္။ ထို႔အတူ flex-direction ကို column ေပးမယ္ဆိုရင္ cross-axis က row ျဖစ္ပါတယ္။

justify-content ကေတာ့ parent component ရဲ႕ extra space ေပၚမွာ မူတည္ၿပီး component ေတြကို ေနရာခ်ထားပါတယ္။ justify-content ရဲ႕ flex-start, flex-end, center, space-between, space-around နဲ႔ space-evenly စတဲ့ value ေတြကို အသုံးျပဳလို႔ ရပါတယ္။

align-content ကေတာ့ justify-content လိုဘဲ flex-start, flex-end, center, space-between, space-around နဲ႔ space-evenly ဆိုတဲ့ value ေတြ ရွိပါတယ္။ ဒါေပမယ့္ အလုပ္လုပ္ပုံခ်င္း ကြာျခားပါတယ္။ align-content ကေတာ့ cross-axis ေပၚမွာ မူတည္ၿပီး အလုပ္လုပ္ပါတယ္။ align-content ကို အသုံးျပဳမယ္ဆိုရင္ flex-wrap: wrap ထားရမွာျဖစ္ၿပီး align-content ရဲ႕ သက္ေရာက္မႈကို component ေတြ multiple lines ေနရာယူတဲ့အခ်ိန္မွ ေတြ႕ရမွာ ျဖစ္ပါတယ္။

align-items ကေတာ့ ကိုယ္ေ႐ြးခ်ယ္ထားတဲ့ flex-direction ရဲ႕ cross-axis ေပၚ မူတည္ၿပီး component ေတြကို ေနရာခ်ထားပါတယ္။ align-items မွာေတာ့ flex-start, flex-end, center, baseline နဲ႔ stretch ဆိုၿပီး value ေတြ ရွိပါတယ္။

ညီမ အေပၚမွာေျပာခဲ့တဲ့ flex-wrap, flex-direction, justify-content, align-content နဲ႔ align-center ကေတာ့ parent component မွာ ေရးသားရမည့္ properties ေတြ ျဖစ္ပါတယ္။

align-self ကေတာ့ child component တစ္ခုခ်င္းကို သီးျခား ေနရာခ်ထားခ်င္တဲ့အခ်ိန္မွာ အသုံးျပဳပါတယ္။ “align-self” property ကို ကိုယ္သီးျခား ေျပာင္းခ်င္တဲ့ child component မွာ ေရးသားရမွာ ျဖစ္ပါတယ္။ align-self မွာေတာ့ flex-start, flex-end, center, baseline, stretch နဲ႔ auto ဆိုၿပီး value ေတြ ရွိပါတယ္။

flex-grow ကေတာ့ parent component မွာ child component အသီးသီးကို ဘယ္ေလာက္ပမာဏ ေနရာေပးမယ္ဆိုၿပီး သတ္မွတ္တဲ့အခါ အသုံးျပဳပါတယ္။ ဥပမာအေနနဲ႔ flex-grow: 1; ဆိုၿပီး child component အသီးသီးမွာ ေရးသားထားမယ္ဆိုရင္ child-component ေတြက ညီတူညီမွ် parent component မွာ ေနရာယူသြားမွာ ျဖစ္ပါတယ္။ child component 3 ခု ရွိတဲ့အခါမွာ ပထမတစ္ခုကို flex-grow: 1,  ဒုတိယတစ္ခုကို flex-grow: 2, တတိယတစ္ခုကို flex-grow: 3; ေပးမယ္ဆို ပထမ child component က parent component ရဲ႕ 1/6 ကို ေနရာယူမယ္၊ ဒုတိယ child component က parent component ရဲ႕ 2/6 ကို ေနရာယူမယ္၊ တတိယတစ္ခုကေတာ့ 3/6 ကို ေနရာယူသြားမွာ ျဖစ္ပါတယ္။

ဒီေန႔ ညီမ မွ်ေဝေပးခဲ့ flexbox properties ေတြကို ေလ့လာၿပီး အက်ိဳးရွိသြားမယ္လို႔ ေမွ်ာ္လင့္ပါတယ္ရွင့္။ အခ်ိန္ေပး ဖတ္ရႈေပးတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *