Flex Container

Flexbox ကိုသုံးဖို့ parent element မှာ display: flex; သတ်မှတ်ရပါတယ်။ Parent ကို flex container လို့ခေါ်ပြီး child တွေက flex items ဖြစ်သွားပါတယ်။ Container မှာ flex-direction, justify-content, align-items, gap, flex-wrap စတာတွေသုံးပြီး items တွေကိုထိန်းနိုင်ပါတယ်။

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
}

.feature-card {
  flex: 1 1 240px;
}

Feature card တွေက row အတိုင်းစီပြီး screen ကျဉ်းလာရင် wrap လုပ်သွားပါမယ်။ Card တစ်ခုချင်းစီက အနည်းဆုံး 240px ဝန်းကျင်ထားပြီး responsive ဖြစ်ပါမယ်။