Bootstrap 4 Flex
Bootstrap 4 Flex
Bootstrap 4 အစိတ်အပိုင်းများ၏ အပြင်အဆင်ကို ထိန်းချုပ်ရန် flex class များကို အသုံးပြုပါ။
Flexbox
Bootstrap 3 နှင့် Bootstrap 4 အကြားအကြီးမားဆုံးကွာခြားချက်မှာ ယခု Bootstrap 4 သည် layout ကိုကိုင်တွယ်ရန် floats များအစား flexbox ကိုအသုံးပြုနေခြင်းဖြစ်သည်။
Flexible Box Layout Module သည် float သို့မဟုတ် positioning ကိုအသုံးမပြုဘဲ ပြောင်းလွယ်ပြင်လွယ် တုံ့ပြန်နိုင်သော အပြင်အဆင်ပုံစံကို ဒီဇိုင်းဆွဲရန် ပိုမိုလွယ်ကူစေသည်။ သင်သည် flex အသစ် ဖြစ်ပါက ကျွန်ုပ်တို့၏ CSS Flexbox Tutorial တွင် ၎င်းအကြောင်းကို သင်ဖတ်ရှုနိုင်ပါသည် ။
မှတ်ချက်- Flexbox ကို IE9 နှင့် အစောပိုင်းဗားရှင်းများတွင် ပံ့ပိုးမထားပါ။
IE8-9 ပံ့ပိုးကူညီမှု လိုအပ်ပါက၊ Bootstrap 3 ကို အသုံးပြုပါ။ ၎င်းသည် Bootstrap ၏ အတည်ငြိမ်ဆုံး ဗားရှင်းဖြစ်ပြီး အရေးကြီးသော ချွတ်ယွင်းချက်များနှင့် စာရွက်စာတမ်းပြောင်းလဲမှုများအတွက် အဖွဲ့မှ ပံ့ပိုးပေးနေဆဲဖြစ်သည်။ သို့သော် ၎င်းတွင် အင်္ဂါရပ်အသစ်များကို ထည့်သွင်းမည်မဟုတ်ပါ။
flexbox ကွန်တိန်နာကို ဖန်တီးရန်နှင့် ကလေးများကို တိုက်ရိုက် flex ပစ္စည်းများအဖြစ်သို့ ပြောင်းလဲရန် d-flexအတန်းကို အသုံးပြုပါ-
ဥပမာ
ဥပမာ
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
inline flexbox container တစ်ခုဖန်တီးရန်၊ d-inline-flexclass ကိုသုံးပါ-
ဥပမာ
ဥပမာ
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
အလျားလိုက် ဦးတည်ချက်
.flex-rowFlex ပစ္စည်းများကို အလျားလိုက် (ဘေးချင်းယှဉ်) ပြသရန် အသုံးပြု ပါ။ ဤသည်မှာ ပုံသေဖြစ်သည်။
အကြံပြုချက်-.flex-row-reverse
အလျားလိုက် လမ်းကြောင်းကို ညာဘက်သို့ ချိန်ညှိရန် အသုံးပြု ပါ-
ဥပမာ
ဥပမာ
<div class="d-flex flex-row
bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
ဒေါင်လိုက် ဦးတည်ချက်
.flex-columnFlex ပစ္စည်းများကို ဒေါင်လိုက် (တစ်ခုနှင့်တစ်ခုအပေါ်တွင်) ပြသရန် သို့မဟုတ် .flex-column-reverse
ဒေါင်လိုက်ဦးတည်ချက်ကို ပြောင်းပြန်လှန်ရန် အသုံးပြုပါ -
ဥပမာ
ဥပမာ
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
အကြောင်းအရာကို အကြောင်းပြပါ။
.justify-content-*flex items များ၏ ချိန်ညှိမှုကို ပြောင်းလဲရန် အတန်းများကို အသုံးပြု ပါ။ မှန်ကန်သော အတန်းများသည် 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>
အနံ / ညီမျှခြင်း ဖြည့်ပါ။
.flex-fill၎င်းတို့ကို တူညီသော အကျယ်များအဖြစ် တွန်းအားပေးရန် flex items များကို အသုံးပြု ပါ-
ဥပမာ
ဥပမာ
<div class="d-flex">
<div class="p-2 bg-info
flex-fill">Flex
item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
ကြီးပွား
.flex-grow-1ကျန်နေရာများကိုယူရန် flex item ကို သုံး ပါ။ အောက်ဖော်ပြပါ ဥပမာတွင်၊ ပထမ flex အရာနှစ်ခုသည် ၎င်းတို့၏ လိုအပ်သောနေရာကို ယူမည်ဖြစ်ပြီး နောက်ဆုံးအရာသည် ရနိုင်သောနေရာကျန်ကို နေရာယူသည်-
ဥပမာ
ဥပမာ
<div class="d-flex">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
အကြံပြုချက်-.flex-shrink-1 လိုအပ်ပါက ၎င်းကို ကျုံ့သွားစေရန် Flex item တစ်ခုပေါ်တွင် အသုံးပြု ပါ။
အော်
.orderအတန်းများ နှင့်အတူ သီးခြား flex item(များ) ၏ အမြင်အာရုံကို ပြောင်းလဲပါ ။ အကျုံးဝင်သော အတန်းများသည် 0 မှ 12 အထိဖြစ်ပြီး အနိမ့်ဆုံးနံပါတ်သည် အမြင့်ဆုံးဦးစားပေးဖြစ်သည် (အမှာစာ-1 ကို မှာယူမှု-2 မတိုင်မီ ပြထားသည်၊ စသည်ဖြင့်။)။
ဥပမာ
ဥပမာ
<div class="d-flex bg-secondary">
<div class="p-2 bg-info
order-3">Flex
item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1">Flex item 3</div>
</div>
အလိုအလျောက်အနားသတ်များ
အလိုအလျောက် အနားသတ်များကို လွယ်ကူစွာ ပေါင်းထည့်ခြင်းဖြင့် .mr-auto(အရာများကို ညာဘက်သို့ တွန်းပါ) သို့မဟုတ် .ml-auto(အရာများကို ဘယ်ဘက်သို့ တွန်းပါ) ကို အသုံးပြုခြင်းဖြင့် အလွယ်တကူ ထည့်ပါ-
ဥပမာ
ဥပမာ
<div class="d-flex
bg-secondary">
<div class="p-2 mr-auto bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex bg-secondary">
<div
class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 ml-auto bg-primary">Flex item
3</div>
</div>
ခြုံ
Flex ပစ္စည်းများကို flex container တွင် မည်ကဲ့သို့ ပတ်ကြောင်း .flex-nowrap(မူလ) .flex-wrapသို့မဟုတ် ထိန်းချုပ်ပါ .flex-wrap-reverse။
နမူနာဘောက်စ်ရှိ flex အရာများကို ထုပ်ပိုးခြင်းအား ပြောင်းလဲခြင်းဖြင့် အတန်းသုံးမျိုးကြား ခြားနားချက်ကို ကြည့်ရန် အောက်ပါခလုတ်များကို နှိပ်ပါ။
ဥပမာ
ဥပမာ
<div class="d-flex flex-wrap">..</div>
<div class="d-flex
flex-wrap-reverse">..</div>
<div class="d-flex
flex-nowrap">..</div>
အကြောင်းအရာကို ချိန်ညှိပါ။
အတန်းများ နှင့် စုစည်း ထားသော flex အရာ များ၏ ဒေါင်လိုက်ချိန်ညှိမှုကို ထိန်းချုပ် ပါ။ .align-content-*မှန်ကန်သော အတန်းများသည် .align-content-start(မူလ) ၊ .align-content-end၊ .align-content-center၊ နှင့် ..align-content-between.align-content-around.align-content-stretch
မှတ်ချက်- ဤအတန်းများသည် flex items အတန်းတစ်ခုတည်းအပေါ် သက်ရောက်မှုမရှိပါ။
ဥပမာ
ဥပမာ
<div class="d-flex flex-wrap
align-content-start">..</div>
<div class="d-flex
flex-wrap align-content-end">..</div>
<div class="d-flex
flex-wrap align-content-center">..</div>
<div class="d-flex
flex-wrap align-content-around">..</div>
<div class="d-flex
flex-wrap align-content-stretch">..</div>
အရာများကို ချိန်ညှိပါ။
အတန်း များနှင့်အတူ flex items များ၏ အတန်းတစ်ခုတည်း၏ ဒေါင်လိုက်ချိန်ညှိမှုကို ထိန်းချုပ် ပါ .align-items-*
။ မှန်ကန်သော အတန်းများမှာ .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, နှင့် .align-items-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>
မိမိကိုယ်ကို ညှိပါ။
အတန်းများ နှင့် သတ်မှတ်ထားသော flex item တစ်ခု၏ ဒေါင်လိုက်ချိန်ညှိမှုကို ထိန်းချုပ်ပါ ။ .align-self-*မှန်ကန်သော အတန်းများမှာ .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, နှင့် .align-self-stretch
(မူလ) ဖြစ်သည်။
အတန်းငါးခုကြား ကွာခြားချက်ကို ကြည့်ရန် အောက်ပါခလုတ်များကို နှိပ်ပါ။
ဥပမာ
ဥပမာ
<div class="d-flex bg-light" style="height:150px">
<div
class="p-2 border">Flex item 1</div>
<div class="p-2 border
align-self-start">Flex item 2</div>
<div
class="p-2 border">Flex item 3</div>
</div>
တုံ့ပြန်မှု Flex အတန်းများ
All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.
The * symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.
| Class | Description | Example |
|---|---|---|
| Flex Container | ||
.d-*-flex |
Creates a flexbox container for different screens | |
.d-*-inline-flex |
Creates an inline flexbox container for different screens | |
| Direction | ||
.flex-*-row |
Display flex items horizontally on different screens | |
.flex-*-row-reverse |
Display flex items horizontally, and right-aligned, on different screens | |
.flex-*-column |
Display flex items vertically on different screens | |
.flex-*-column-reverse |
Display flex items vertically, with reversed order, on different screens screens | |
| Justified Content | ||
.justify-content-*-start |
Display flex items from the start (left-aligned) on different screens | |
.justify-content-*-end |
Display flex items at the end (right-aligned) on different screens | |
.justify-content-*-center |
Display flex items in the center of a flex container on different screens | |
.justify-content-*-between |
Display flex items in "between" on different screens | |
.justify-content-*-around |
Display flex items "around" on different screens | |
| Fill / Equal Width | ||
.flex-*-fill |
Force flex items into equal widths on different screens | |
| Grow | ||
.flex-*-grow-0 |
Don't make the items grow on different screens | |
.flex-*-grow-1 |
Make items grow on different screens | |
| Shrink | ||
.flex-*-shrink-0 |
Don't make the items shrink on diferent screens | |
.flex-*-shrink-1 |
Make items shrink on different screens | |
| Order | ||
.order-*-0-12 |
Change the order from 0 to 12 on small screens | |
| Wrap | ||
.flex-*-nowrap |
Don't wrap items on different screens | |
.flex-*-wrap |
Wrap items on different screens | |
.flex-*-wrap-reverse |
Reverse the wrapping of items on different screens | |
| Align Content | ||
.align-content-*-start |
Align gathered items from the start on different screens | |
.align-content-*-end |
Align gathered items at the end on different screens | |
.align-content-*-center |
Align gathered items in the center on different screens | |
.align-content-*-around |
Align gathered items "around" on different screens | |
.align-content-*-stretch |
Stretch gathered items on different screens | |
| Align Items | ||
.align-items-*-start |
Align single rows of items from the start on different screens | |
.align-items-*-end |
Align single rows of items at the end on different screens | |
.align-items-*-center |
Align single rows of items in the center on different screens | |
.align-items-*-baseline |
Align single rows of items on the baseline on different screens | |
.align-items-*-stretch |
Stretch single rows of items on different screens | |
| Align Self | ||
.align-self-*-start |
Align a flex item from the start on different screens | |
.align-self-*-end |
Align a flex item at the end on different screens | |
.align-self-*-center |
Align a flex item in the center on different screens | |
.align-self-*-baseline |
Align a flex item on the baseline on different screens | |
.align-self-*-stretch |
Stretch a flex item on different screens |