မဂၤလာပါခင္ဗ်။
ကၽြန္ေတာ္ကေတာ့ Spiceworks Myanmar Company တြင္ Web Designer အျဖစ္ ဝင္ေရာက္လုပ္ကုိင္ လ်က္ရွိေသာ စုိင္းေအာင္ႏုိင္ဦး ျဖစ္ပါတယ္။
ဒီတစ္ပတ္မွာေတာ့ CSS Flexbox Properties ၏ အသုံးျပဳပုံႏွင့္ ပတ္သက္ၿပီး မွ်ေဝေပးခ်င္ပါတယ္ခင္ဗ်။
Flexbox properties သည္ ေအာက္ေဖာ္ျပပါ Browser Version မ်ားႏွင့္ Support ျဖစ္ပါတယ္။
Flexbox properties ေတြျဖစ္တဲ့
- Wrap
- Nowrap
- Flex-direction
- Justify-content
- Align-item
- Align-self
မ်ားအနက္မွ ကၽြန္ေတာ္တုိ႕ အသုံးမ်ားတဲ့ Wrap နဲ႕ Flex-direction ကုိ ေဖာ္ျပေပးသြားပါမယ္။ Flexbox ဟာ ကၽြန္ေတာ္တုိ႕ အခု ေတာ္ေတာ္မ်ားမ်ားအသုံးျပဳေနတဲ့ Float properties (သို႕မဟုတ္) Grid system နဲ႕ ခပ္ဆင္ဆင္ပါပဲ။ Flexbox ကေတာ့ Float နဲ႕ Grid system ထက္ သုံးရတာ ပုိၿပီး လြယ္ကူ ရုိးရွင္းၿပီး Responsive လဲ အလုပ္လုပ္ၿပီးသားျဖစ္ပါတယ္။
ပထမဦးဆုံး Flexbox ကုိ အသုံးျပဳေတာ့မယ္ဆုိရင္ Container (သို႕မဟုတ္) Parent <div> မွာ display: flex; ကုိအရင္ ေရးေပးမွ က်န္တဲ့ properties ေတြအလုပ္လုပ္မွာ ျဖစ္ပါတယ္။
ေအာက္ေဖာ္ျပပါ ပုံအတုိင္း ေရးေပးလုိ႕ရပါတယ္။
“ flex-wrap: wrap ” properties ကုိ သုံးလုိက္ရင္ Container ထဲမွာ ရွိတဲ့ items ေတြက ေအာက္ပါ ပုံအတိုင္း ရမွာ ျဖစ္ပါတယ္။
မွတ္ခ်က္။ ။ Flexbox properties ကုိ Container (သုိ႕မဟုတ္) Parent <div> မွာ ပဲ ေရးရပါမယ္။ ( align-self properties ကုိ သုံးမယ္ဆုိရင္ေတာ့ container ထဲမွာ ရွိတဲ့ item ေလးေတြမွာ ေရးလုိ႕ရပါတယ္။)
ေနာက္ Properties တစ္ခုကေတာ့ Flex-direction ပဲ ျဖစ္ပါတယ္။
Flex-direction Coding ကုိေတာ့ ေအာက္ပါပုံအတုိင္း ေရးေပးရပါမယ္။
သူကေတာ့ Container ႏွစ္ခု သုံးရပါမယ္။ ပထမ container ကို Flex-wrap: wrap; လုိ႕ ေရးၿပီး ၊ ဒုတိယ Container ကုိ Flex-direction: row-reverse; ေရးလုိက္ရင္ Float: left | right; သုံးစရာမလုိပဲ ေအာက္ေဖာ္ျပပါ ပုံစံအတုိင္း ရရွိမွာ ျဖစ္ပါတယ္။
စာဖတ္သူေတြ အေနနဲ႕ တျခား Flexbox Properties ေတြကုိလဲ ကုိယ္တုိင္ လက္ေတြ႕ေရးေစခ်င္ပါတယ္လုိ႕ အႀကံျပဳလိုက္ပါတယ္ဗ်။
ကၽြန္ေတာ့္ Blog ကုိ အခ်ိန္ေပးၿပီး ဖတ္ရႈေပးတဲ့အတြက္လည္း ေက်းဇူးတင္ပါတယ္ဗ်။
