Flex item တွေမှာ flex-grow, flex-shrink, flex-basis, order စတာတွေသုံးနိုင်ပါတယ်။ အတိုချုံးပြောရရင် flex: 1; ဆိုတာ item တွေကို နေရာလွတ်ကိုညီညီမျှမျှယူခိုင်းတာပါ။ flex: 1 1 280px; ဆိုတာတော့ grow ရ, shrink ရ, default size 280px ဆိုတဲ့ practical shorthand ဖြစ်ပါတယ်။
css
.pricing-card {
flex: 1 1 280px;
}
.featured-card {
order: -1;
flex-grow: 1.3;
}You should see
Pricing card တွေက responsive width ရှိလာပြီး featured card ကို ပိုရှေ့မှာထားနိုင်ပါမယ်။Warning
order က visual order ကိုပြောင်းပေမယ့် HTML/source order ကိုမပြောင်းပါ။ Accessibility နဲ့ keyboard navigation ကိုစဉ်းစားသင့်ပါတယ်။