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-axis ဖြစ်ပါက 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 ကွန်တိန်နာများရှိ အသုံးဝင်မှုများကို အသုံးပြု ပါ ။ ( ဘ ရောက်ဇာ မူရင်း) ၊ ၊ ၊ ၊ သို့မဟုတ် . ဤအသုံးအဆောင်ပစ္စည်းများကို သရုပ်ပြရန်၊ ကျွန်ုပ်တို့သည် ပျော့ပြောင်းသည့်အရာများ အရေအတွက်ကို တိုးမြှင့်လုပ်ဆောင်ပြီးဖြစ်သည်။startendcenterbetweenaroundstretchflex-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-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-around
• .align-content-xl-stretch