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.d-xxl-flex.d-xxl-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.flex-xxl-row.flex-xxl-row-reverse.flex-xxl-column.flex-xxl-column-reverse
အကြောင်းအရာကို အကြောင်းပြပါ။
justify-contentပင်မဝင်ရိုးပေါ်ရှိ flex ပစ္စည်းများ၏ ချိန်ညှိမှုကို ပြောင်းလဲရန် flexbox ကွန်တိန်နာများတွင် အသုံးဝင်မှုများကို အသုံးပြုပါ (စတင်ရန် x ဝင်ရိုး၊ y ဝင်ရိုးဖြစ်လျှင် ) flex-direction: column။ ( ဘ startရောက်ဇာ မူရင်း) ၊ end၊ center၊ between၊ aroundသို့မဟုတ် evenly.
<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>
<div class="d-flex justify-content-evenly">...</div>
တုံ့ပြန်မှုဆိုင်ရာ ကွဲပြားမှုများလည်း ရှိသေးသည် justify-content။
.justify-content-start.justify-content-end.justify-content-center.justify-content-between.justify-content-around.justify-content-evenly.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-sm-evenly.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-md-evenly.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-lg-evenly.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around.justify-content-xl-evenly.justify-content-xxl-start.justify-content-xxl-end.justify-content-xxl-center.justify-content-xxl-between.justify-content-xxl-around.justify-content-xxl-evenly
အရာများကို ချိန်ညှိပါ။
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.align-items-xxl-start.align-items-xxl-end.align-items-xxl-center.align-items-xxl-baseline.align-items-xxl-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.align-self-xxl-start.align-self-xxl-end.align-self-xxl-center.align-self-xxl-baseline.align-self-xxl-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-xxl-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.flex-xxl-{grow|shrink}-0.flex-xxl-{grow|shrink}-1
အလိုအလျောက်အနားသတ်များ
Flexbox သည် အလိုအလျောက်အနားသတ်များနှင့် Flex alignment များကို ရောနှောလိုက်သောအခါတွင် အလွန်ကောင်းမွန်သော အရာအချို့ကို လုပ်ဆောင်နိုင်သည်။ အောက်တွင်ဖော်ပြထားသည်မှာ အလိုအလျောက်အနားသတ်များမှတစ်ဆင့် flex အရာများကိုထိန်းချုပ်ခြင်း၏နမူနာသုံးခုဖြစ်သည်- ပုံသေ (အလိုအလျောက်အနားသတ်မရှိ)၊ အရာနှစ်ခုကို ညာဘက်သို့ .me-autoတွန်းခြင်း ( ) နှင့် အရာနှစ်ခုကို ဘယ်ဘက်သို့တွန်းခြင်း ( .ms-auto)။
<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="me-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="ms-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-xxl-nowrap.flex-xxl-wrap.flex-xxl-wrap-reverse
အော်
အသုံးအဆောင်များ လက်တစ်ဆုပ်စာဖြင့် သတ်သတ်မှတ်မှတ် flex ပစ္စည်းများ၏ အမြင်အာရုံ ကို ပြောင်းလဲ ပါ။ orderကျွန်ုပ်တို့သည် ပစ္စည်းတစ်ခုကို ပထမ သို့မဟုတ် နောက်ဆုံးပြုလုပ်ရန် ရွေးချယ်မှုများအပြင် DOM မှာယူမှုကို အသုံးပြုရန်အတွက် ပြန်လည်သတ်မှတ်ခြင်းအတွက်သာ ကျွန်ုပ်တို့ ပေးပါသည်။ order0 မှ 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-sm-0.order-sm-1.order-sm-2.order-sm-3.order-sm-4.order-sm-5.order-md-0.order-md-1.order-md-2.order-md-3.order-md-4.order-md-5.order-lg-0.order-lg-1.order-lg-2.order-lg-3.order-lg-4.order-lg-5.order-xl-0.order-xl-1.order-xl-2.order-xl-3.order-xl-4.order-xl-5.order-xxl-0.order-xxl-1.order-xxl-2.order-xxl-3.order-xxl-4.order-xxl-5
ထို့အပြင် အသုံးချခြင်းဖြင့် နှင့် .order-firstအသီးသီး ပြောင်းလဲ .order-lastနိုင်သော တုံ့ပြန်မှုရှိသော အတန်း များလည်း ရှိပါသည် ။orderorder: -1order: 6
.order-first.order-last.order-sm-first.order-sm-last.order-md-first.order-md-last.order-lg-first.order-lg-last.order-xl-first.order-xl-last.order-xxl-first.order-xxl-last
အကြောင်းအရာကို ချိန်ညှိပါ။
ဝင်ရိုးများပေါ်တွင် 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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
မီဒီယာတွေရှိကြပါတယ်။
Bootstrap 4 မှ မီဒီယာအရာဝတ္ထုအစိတ်အပိုင်း ကို ပုံတူကူးရန် ရှာဖွေနေ ပါသလား။ ယခင်ထက်ပို၍ ပြောင်းလွယ်ပြင်လွယ်နှင့် စိတ်ကြိုက်ပြင်ဆင်မှုကို ခွင့်ပြုသည့် flex utilities အနည်းငယ်ဖြင့် ၎င်းကို အချိန်တိုအတွင်း ပြန်လည်ဖန်တီးပါ။
<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>ပုံဘေးရှိ အကြောင်းအရာကို ဒေါင်လိုက်ဗဟိုပြုလိုကြောင်း ပြောပါ-
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>ဆူး
အသုံးအဆောင်များ API
Flexbox utilities များကို ကျွန်ုပ်တို့၏ utilities API တွင် ကြေငြာ scss/_utilities.scssထားသည်။ utilities API ကို အသုံးပြုနည်းကို လေ့လာပါ။
"flex": (
responsive: true,
property: flex,
values: (fill: 1 1 auto)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),