Flex
တုံ့ပြန်မှု flexbox utilities အစုံအလင်ဖြင့် ဂရစ်ကော်လံများ၊ လမ်းကြောင်းပြမှု၊ အစိတ်အပိုင်းများနှင့် အခြားအရာများ၏ အပြင်အဆင်၊ ချိန်ညှိမှုနှင့် အရွယ်အစားကို အမြန်စီမံခန့်ခွဲပါ။ ပိုမိုရှုပ်ထွေးသော အကောင်အထည်ဖော်မှုများအတွက်၊ စိတ်ကြိုက် CSS လိုအပ်နိုင်သည်။
ပျော့ပြောင်းသောအပြုအမူများကို ဖွင့်ပါ။
Flexbox display
ကွန်တိန်နာတစ်ခုဖန်တီးရန် အသုံးဝင်မှုများကို အသုံးပြုပြီး ကလေးများကို တိုက်ရိုက်ဒြပ်စင် များကို flex ပစ္စည်းများအဖြစ်သို့ ပြောင်းလဲပါ။ Flex ကွန်တိန်နာများနှင့် ပစ္စည်းများကို ထပ်လောင်း flex ဂုဏ်သတ္တိများဖြင့် ထပ်မံမွမ်းမံနိုင်သည်။
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
.d-flex
နှင့် တုံ့ပြန်မှု ကွဲပြားမှုများလည်း ရှိပါသည် .d-inline-flex
။
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
ဦးတည်ချက်
ဦးတည်ချက်အသုံးအဆောင်ပစ္စည်းများဖြင့် flex container တွင် flex items များ၏ ဦးတည်ချက်ကို သတ်မှတ်ပါ။ အခြေအနေအများစုတွင် ဘရောက်ဆာမူရင်းဖြစ်သောကြောင့် ဤနေရာတွင် အလျားလိုက်အတန်းအစားကို ချန်လှပ်နိုင်ပါသည် row
။ သို့သော်၊ ဤတန်ဖိုးကို ပြတ်သားစွာ သတ်မှတ်ရန် လိုအပ်သည့် အခြေအနေများ (တုံ့ပြန်မှုရှိသော အပြင်အဆင်များကဲ့သို့) ကြုံတွေ့ရနိုင်သည်။
.flex-row
အလျားလိုက် ဦးတည်ချက်ကို သတ်မှတ်ရန် (ဘရောက်ဆာ မူရင်း) သို့မဟုတ် .flex-row-reverse
ဆန့်ကျင်ဘက်ဘက်မှ အလျားလိုက် ဦးတည်ချက် စတင်ရန် အသုံးပြုပါ ။
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
.flex-column
ဒေါင်လိုက်ဦးတည်ချက်ကို သတ်မှတ်ရန် သို့မဟုတ် .flex-column-reverse
ဆန့်ကျင်ဘက်ဘက်မှ ဒေါင်လိုက်လမ်းကြောင်းကို စတင်ရန် အသုံးပြု ပါ။
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
တုံ့ပြန်မှုဆိုင်ရာ ကွဲပြားမှုများလည်း ရှိသေးသည် flex-direction
။
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
အကြောင်းအရာကို အကြောင်းပြပါ။
justify-content
ပင်မဝင်ရိုးပေါ်ရှိ flex ပစ္စည်းများ၏ ချိန်ညှိမှုကို ပြောင်းလဲရန် flexbox ကွန်တိန်နာများတွင် အသုံးဝင်မှုများကို အသုံးပြုပါ (စတင်ရန် x ဝင်ရိုး၊ y ဝင်ရိုးဖြစ်လျှင် ) flex-direction: column
။ ( ဘ start
ရောက်ဆာမူရင်း) ၊ end
၊ center
၊ between
သို့မဟုတ် around
.
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
တုံ့ပြန်မှုဆိုင်ရာ ကွဲပြားမှုများလည်း ရှိသေးသည် justify-content
။
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
အရာများကို ချိန်ညှိပါ။
align-items
လက်ဝါးကပ်တိုင်ဝင်ရိုးပေါ်ရှိ flex ပစ္စည်းများ၏ ချိန်ညှိမှုကို ပြောင်းလဲရန် flexbox ကွန်တိန်နာများရှိ အသုံးဝင်ပစ္စည်းများကို အသုံးပြုပါ (စတင်ရန် y ဝင်ရိုး၊ x ဝင်ရိုးဖြစ်လျှင် ) flex-direction: column
။ start
, end
, center
, baseline
, သို့မဟုတ် stretch
(ဘရောက်ဇာ မူရင်း) မှ ရွေးချယ် ပါ။
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
တုံ့ပြန်မှုဆိုင်ရာ ကွဲပြားမှုများလည်း ရှိသေးသည် align-items
။
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
မိမိကိုယ်ကို ညှိပါ။
လက်ဝါးကပ်တိုင်ဝင်ရိုးပေါ်ရှိ ၎င်းတို့၏ ချိန်ညှိမှုကို တစ်ဦးချင်းပြောင်းလဲရန် flexbox ပစ္စည်းများပေါ်ရှိ utilities ကိုသုံး align-self
ပါ (စတင်ရန် y ဝင်ရိုး၊ x ဝင်ရိုးဆိုပါက flex-direction: column
) ။ align-items
: start
, end
, center
, baseline
, သို့မဟုတ် stretch
(ဘရောက်ဆာမူလ) ကဲ့သို့တူညီသောရွေးချယ်မှုများမှရွေးချယ်ပါ ။
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>
တုံ့ပြန်မှုဆိုင်ရာ ကွဲပြားမှုများလည်း ရှိသေးသည် align-self
။
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
ဖြည့်စွက်ပါ။
.flex-fill
ရရှိနိုင်သော အလျားလိုက် နေရာအားလုံးကို ယူနေစဉ်တွင် ၎င်းတို့၏ အကြောင်းအရာနှင့် တူညီသော အကျယ်များ (သို့မဟုတ် ၎င်းတို့၏ အကြောင်းအရာသည် ၎င်းတို့၏ ဘောင်ဘောင်များကို မကျော်လွန်ပါက) ပေါက်ဖော်ဒြပ်စင်များ စီးရီးတစ်ခုပေါ်တွင် အတန်း ကို အသုံးပြု ပါ။
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>
တုံ့ပြန်မှုဆိုင်ရာ ကွဲပြားမှုများလည်း ရှိသေးသည် flex-fill
။
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
ကြီးထွားပြီး ကျုံ့သွားတယ်။
.flex-grow-*
ရနိုင်သောနေရာကိုဖြည့်ရန် flex item တစ်ခု၏ကြီးထွားနိုင်စွမ်းကိုပြောင်းရန် utilities ကို သုံး ပါ။ အောက်ဖော်ပြပါ ဥပမာတွင်၊ .flex-grow-1
ဒြပ်စင်များသည် ၎င်းတို့လိုအပ်သော နေရာလွတ်ကို ခွင့်ပြုထားချိန်တွင် ၎င်းကို ရနိုင်သော နေရာအားလုံးကို အသုံးပြုပါသည်။
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</div>
.flex-shrink-*
လိုအပ်ပါက flex item ၏ ကျုံ့နိုင်မှုကို ပြောင်းရန် utilities ကို သုံး ပါ။ အောက်ဖော်ပြပါ ဥပမာတွင်၊ ပါ၀င်သော ဒုတိယ flex item .flex-shrink-1
သည် ယခင် flex item အတွက် နေရာပိုခွင့်ပြုရန် ၎င်း၏ အကြောင်းအရာများကို စာကြောင်းအသစ်တွင် "ကျုံ့" ခိုင်းစေ .w-100
ပါသည်။
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>
flex-grow
နှင့် တုံ့ပြန်မှု ကွဲပြားမှုများလည်း ရှိပါသည် flex-shrink
။
.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
အလိုအလျောက်အနားသတ်များ
Flexbox သည် အလိုအလျောက်အနားသတ်များနှင့် Flex alignment များကို ရောနှောလိုက်သောအခါတွင် အလွန်ကောင်းမွန်သော အရာအချို့ကို လုပ်ဆောင်နိုင်သည်။ အောက်တွင်ဖော်ပြထားသည်မှာ အလိုအလျောက်အနားသတ်များမှတစ်ဆင့် flex အရာများကိုထိန်းချုပ်ခြင်း၏နမူနာသုံးခုဖြစ်သည်- ပုံသေ (အလိုအလျောက်အနားသတ်မရှိ)၊ အရာနှစ်ခုကို ညာဘက်သို့ .mr-auto
တွန်းခြင်း ( ) နှင့် အရာနှစ်ခုကို ဘယ်ဘက်သို့တွန်းခြင်း ( .ml-auto
)။
ကံမကောင်းစွာပဲ၊ IE10 နှင့် IE11 တို့သည် မိဘတွင် ပုံသေမဟုတ်သော justify-content
တန်ဖိုးရှိသည့် flex အရာများပေါ်တွင် အလိုအလျောက်အနားသတ်များကို ကောင်းစွာမပံ့ပိုးနိုင်ပါ။ အသေးစိတ်အချက်အလက်များအတွက် ဤ StackOverflow အဖြေ ကို ကြည့်ပါ။
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="mr-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>
လိုက်လျောညီထွေဖြစ်စေသော အရာများဖြင့်
ရောနှောခြင်းဖြင့် align-items
, flex-direction: column
နှင့် margin-top: auto
သို့မဟုတ် margin-bottom: auto
.
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>
ခြုံ
Flex ပစ္စည်းများကို Flex Container တွင် ထုပ်ပိုးပုံပြောင်းပါ။ wrapping လုံးဝမပြုလုပ်ပါ (ဘရောက်ဆာမူရင်း) .flex-nowrap
၊ wrapping with .flex-wrap
သို့မဟုတ် reverse wrapping with ကို ရွေးချယ်ပါ .flex-wrap-reverse
။
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<div class="d-flex flex-wrap-reverse">
...
</div>
တုံ့ပြန်မှုဆိုင်ရာ ကွဲပြားမှုများလည်း ရှိသေးသည် flex-wrap
။
.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
အော်
အသုံးအဆောင်များ လက်တစ်ဆုပ်စာဖြင့် သတ်သတ်မှတ်မှတ် flex ပစ္စည်းများ၏ အမြင်အာရုံ ကို ပြောင်းလဲ ပါ။ order
ကျွန်ုပ်တို့သည် ပစ္စည်းတစ်ခုကို ပထမ သို့မဟုတ် နောက်ဆုံးပြုလုပ်ရန် ရွေးချယ်မှုများအပြင် DOM မှာယူမှုကို အသုံးပြုရန်အတွက် ပြန်လည်သတ်မှတ်ခြင်းအတွက်သာ ကျွန်ုပ်တို့ ပေးပါသည်။ order
မည်သည့် integer value (ဥပမာ၊ ) ကိုယူသည် နှင့်အမျှ 5
လိုအပ်သော ထပ်ဆောင်းတန်ဖိုးများအတွက် စိတ်ကြိုက် CSS ကိုထည့်ပါ။
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second flex item</div>
<div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>
တုံ့ပြန်မှုဆိုင်ရာ ကွဲပြားမှုများလည်း ရှိသေးသည် order
။
.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-6
.order-sm-7
.order-sm-8
.order-sm-9
.order-sm-10
.order-sm-11
.order-sm-12
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
.order-md-9
.order-md-10
.order-md-11
.order-md-12
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-6
.order-xl-7
.order-xl-8
.order-xl-9
.order-xl-10
.order-xl-11
.order-xl-12
အကြောင်းအရာကို ချိန်ညှိပါ။
ဝင်ရိုးများပေါ်တွင် flex ပစ္စည်းများကို အတူတကွalign-content
ချိန်ညှိရန် flexbox ကွန်တိန်နာများရှိ အသုံးဝင်မှုများကို အသုံးပြု ပါ ။ ( ဘ ရောက်ဇာ မူရင်း) ၊ ၊ ၊ ၊ သို့မဟုတ် . ဤအသုံးအဆောင်များကို သရုပ်ပြရန်၊ ကျွန်ုပ်တို့သည် ပျော့ပြောင်းသည့်အရာများ၏ အရေအတွက်ကို တိုးမြှင့်လုပ်ဆောင်ပြီးဖြစ်သည်။start
end
center
between
around
stretch
flex-wrap: wrap
ကြိုတင်အသိပေးသည်! ဤပိုင်ဆိုင်မှုသည် flex items အတန်းတစ်ခုတည်းအပေါ် သက်ရောက်မှုမရှိပါ။
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<div class="d-flex align-content-stretch flex-wrap">...</div>
တုံ့ပြန်မှုဆိုင်ရာ ကွဲပြားမှုများလည်း ရှိသေးသည် align-content
။
.align-content-start
.align-content-end
.align-content-center
.align-content-between
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch