CSS Flex ပစ္စည်းများ
ကလေးဒြပ်စင်များ (အရာများ)
Flex container ၏ တိုက်ရိုက်ကလေး အစိတ်အပိုင်းများသည် အလိုအလျောက် ပြောင်းလွယ်ပြင်လွယ် (flex) အရာများ ဖြစ်လာသည်။
၁
၂
၃
၄
အထက်ပါဒြပ်စင်သည် မီးခိုးရောင်ပြောင်းထည့်သည့် ကွန်တိန်နာအတွင်း အပြာရောင်အကွေးအကွေးလေးခုကို ကိုယ်စားပြုသည်။
ဥပမာ
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
flex item ဂုဏ်သတ္တိများမှာ-
အော်ဒါအိမ်ခြံမြေ၊
ပိုင်ဆိုင်မှုသည် flex ပစ္စည်း များ၏ orderအစီအစဥ်ကို သတ်မှတ်သည်။
၁
၂
၃
၄
ကုဒ်ရှိ ပထမဆုံး flex item သည် အပြင်အဆင်ရှိ ပထမဆုံးအရာအဖြစ် ပေါ်လာရန် မလိုအပ်ပါ။
မှာယူမှုတန်ဖိုးသည် နံပါတ်ဖြစ်ရမည်၊ မူရင်းတန်ဖိုးမှာ 0 ဖြစ်သည်။
ဥပမာ
မှာ ယူမှု ပိုင်ဆိုင်မှုသည် flex ပစ္စည်းများ၏ အစီစဥ်ကို ပြောင်းလဲနိုင်သည်-
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
flex-grow Property ၊
ပစ္စည်း flex-growတစ်ခုသည် flex item မည်မျှကြီးထွားလာမည်ကို သတ်မှတ်ပေးသည်
၁
၂
၃
တန်ဖိုးသည် နံပါတ်ဖြစ်ရမည်၊ မူရင်းတန်ဖိုးမှာ 0 ဖြစ်သည်။
ဥပမာ
တတိယ flex item ကို အခြား flex item များထက် ရှစ်ဆ ပိုမြန်အောင်လုပ်ပါ-
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
8">3</div>
</div>
flex-shrink Property
ပစ္စည်း flex-shrinkတစ်ခုသည် flex item မည်မျှ ကျုံ့မည်ကို သတ်မှတ်ပေးသည်
၁
၂
၃
၄
၅
၆
၇
၈
၉
၁၀
တန်ဖိုးသည် ဂဏန်းဖြစ်ရမည်၊ မူရင်းတန်ဖိုးမှာ 1 ဖြစ်သည်။
ဥပမာ
တတိယ flex item သည် အခြားသော flex item များကဲ့သို့ ကျုံ့မသွားပါစေနှင့်။
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
flex-based Property
ပိုင်ဆိုင်မှု သည် flex-basisflex အရာတစ်ခု၏ ကနဦးအရှည်ကို သတ်မှတ်သည်။
၁
၂
၃
၄
ဥပမာ
တတိယ flex item ၏ ကနဦးအရှည်ကို 200 pixels သို့ သတ်မှတ်ပါ-
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
flex အိမ်ခြံမြေ
flexပိုင်ဆိုင်မှုသည်
flex-grow, flex-shrink, နှင့် flex-basisဂုဏ်သတ္တိများ အတွက် လက် တိုပစ္စည်းဖြစ်သည်။
ဥပမာ
တတိယအချက်အား ကြီးထွား၍မရနိုင်ပါ (0)၊ ကျုံ့၍မရနိုင်သော (0) နှင့် ကနဦးအရှည် 200 ပစ်ဇယ်ဖြင့် ပြုလုပ်ပါ-
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
align-self Property
ပိုင်ဆိုင်မှု သည် align-selfပြောင်းလွယ်ပြင်လွယ်ရှိသော ကွန်တိန်နာအတွင်း ရွေးချယ်ထားသော အရာအတွက် ချိန်ညှိမှုကို သတ်မှတ်သည်။
align-self ပိုင်ဆိုင်မှုသည် ကွန်တိန်နာ၏ပိုင်ဆိုင်မှုမှ သတ်မှတ်ထားသော ပုံသေ ချိန်ညှိမှုကို အစားထိုး သည် align-items။
၁
၂
၃
၄
ဤဥပမာများတွင် ကျွန်ုပ်တို့သည် 200 pixels မြင့်သောကွန်တိန်နာကို အသုံးပြု၍
align-selfပိုင်ဆိုင်မှုကို ပိုမိုကောင်းမွန်စွာပြသနိုင်သည်-
ဥပမာ
ကွန်တိန်နာ၏အလယ်တွင် တတိယအကွေးအရာအား ချိန်ညှိပါ-
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
ဥပမာ
ကွန်တိန်နာ၏ထိပ်တွင် ဒုတိယ flex အရာအား ချိန်ညှိပြီး ကွန်တိန်နာ၏အောက်ခြေရှိ တတိယ flex ကို ချိန်ညှိပါ-
<div class="flex-container">
<div>1</div>
<div style="align-self:
flex-start">2</div>
<div style="align-self:
flex-end">3</div>
<div>4</div>
</div>
CSS Flexbox Items Properties
အောက်ပါဇယားသည် CSS Flexbox ပစ္စည်းများ ဂုဏ်သတ္တိအားလုံးကို စာရင်းပြုစုထားသည်။
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |