Siirry pääsisältöön Siirry dokumenttien navigointiin
Check

Hallitse nopeasti ruudukon sarakkeiden asettelua, kohdistusta ja kokoa, navigointia, komponentteja ja paljon muuta kattavalla valikoimalla responsiivisia flexbox-apuohjelmia. Monimutkaisemmissa toteutuksissa voi olla tarpeen mukautettu CSS.

Ota joustava käyttäytyminen käyttöön

Käytä displayapuohjelmia luodaksesi flexbox-säiliön ja muuntaaksesi suorat lapsielementit joustaviksi kohteiksi. Flex-säiliöitä ja -tuotteita voidaan muokata edelleen lisäjousto-ominaisuuksilla.

Olen flexbox-kontti!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Olen inline flexbox -kontti!
html
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Responsiivisia muunnelmia on myös .d-flexja .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

Suunta

Aseta taipuvien esineiden suunta flex-säiliössä, jossa on suuntaapuohjelmat. Useimmissa tapauksissa voit jättää vaakasuuntaisen luokan pois täältä, koska selaimen oletusarvo on row. Saatat kuitenkin kohdata tilanteita, joissa tämä arvo on asetettava erikseen (kuten reagoivat asettelut).

Käytä .flex-rowasettaaksesi vaakasuunnan (selaimen oletusarvo) tai .flex-row-reversealoittaaksesi vaakasuunnan vastakkaisesta puolelta.

Flex-tuote 1
Flex-kohde 2
Flex-kohde 3
Flex-tuote 1
Flex-kohde 2
Flex-kohde 3
html
<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Käytä .flex-columnpystysuunnan asettamiseen tai .flex-column-reversepystysuunnan aloittamiseen vastakkaiselta puolelta.

Flex-tuote 1
Flex-kohde 2
Flex-kohde 3
Flex-tuote 1
Flex-kohde 2
Flex-kohde 3
html
<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Responsiivisia muunnelmia on myös 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

Perustele sisältö

Käytä justify-contentflexbox-säiliöiden apuohjelmia muuttaaksesi pääakselin joustavien kohteiden kohdistusta (x-akseli aloittaa, y-akseli, jos flex-direction: column). Valitse start(selaimen oletusarvo), end, center, between, around, tai evenly.

Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<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>

Responsiivisia muunnelmia on myös 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

Kohdista kohteet

Käytä align-itemsflexbox-säiliöiden apuohjelmia muuttaaksesi taipuvien kohteiden kohdistusta poikkiakselilla (alkuun y-akselilla, jos akselilla on flex-direction: column). Valitse start, end, center, baselinetai stretch(selaimen oletusarvo).

Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<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>

Responsiivisia muunnelmia on myös 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

Kohdista itsesi

Käytä align-selfflexbox-kohteiden apuohjelmia muuttaaksesi yksilöllisesti niiden kohdistusta poikkiakselilla (y-akseli aloittaa, x-akseli, jos flex-direction: column). Valitse samoista vaihtoehdoista kuin align-items, start, end, center, baselinetai stretch(selaimen oletusarvo).

Flex-tuote
Tasattu joustava kohde
Flex-tuote
Flex-tuote
Tasattu joustava kohde
Flex-tuote
Flex-tuote
Tasattu joustava kohde
Flex-tuote
Flex-tuote
Tasattu joustava kohde
Flex-tuote
Flex-tuote
Tasattu joustava kohde
Flex-tuote
<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>

Responsiivisia muunnelmia on myös 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

Täyttää

Käytä .flex-fillluokkaa sisarelementtien sarjassa pakottaaksesi ne leveyteen, joka on yhtä suuri kuin niiden sisältö (tai yhtä leveyteen, jos niiden sisältö ei ylitä niiden reunusruutuja) samalla kun ne vievät kaiken käytettävissä olevan vaakatilan.

Flex-tuote, jossa on paljon sisältöä
Flex-tuote
Flex-tuote
html
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

Responsiivisia muunnelmia on myös flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

Kasvaa ja kutistua

Käytä .flex-grow-*apuohjelmia vaihtaaksesi joustavan tuotteen kykyä kasvaa täyttämään käytettävissä oleva tila. Alla olevassa esimerkissä .flex-grow-1elementit käyttävät kaiken käytettävissä olevan tilan, mutta jättävät kahdelle muulle joustoelementille tarvittavan tilan.

Flex-tuote
Flex-tuote
Kolmas flex-tuote
html
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

Käytä .flex-shrink-*apuohjelmia vaihtaaksesi joustavan tuotteen kykyä kutistua tarvittaessa. Alla olevassa esimerkissä toinen joustokohde .flex-shrink-1pakotetaan käärimään sisältönsä uudelle riville "kutistuen", jotta edelliselle joustokohdalle jää enemmän tilaa .w-100.

Flex-tuote
Flex-tuote
html
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

Responsiivisia muunnelmia on myös flex-growja 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

Automaattiset marginaalit

Flexbox voi tehdä melko mahtavia asioita, kun yhdistät joustavat kohdistukset automaattisiin marginaaleihin. Alla on kolme esimerkkiä joustavien kohteiden ohjaamisesta automaattisten marginaalien avulla: oletus (ei automaattista marginaalia), kahden kohteen työntäminen oikealle ( .me-auto) ja kahden kohteen työntäminen vasemmalle ( .ms-auto).

Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
html
<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

Kohdistuskohdilla

Siirrä yksi joustava kohde pystysuunnassa säiliön ylä- tai alaosaan sekoittamalla align-items, flex-direction: columnja margin-top: autotai margin-bottom: auto.

Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
html
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

Kääri

Muuta, miten joustavat tuotteet kääritään joustavaan säiliöön. Valitse ei rivitystä ollenkaan (selaimen oletus) .flex-nowrap-merkillä, kääriminen -merkillä .flex-wraptai käänteinen rivitys -merkillä .flex-wrap-reverse.

Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex flex-nowrap">
  ...
</div>
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex flex-wrap">
  ...
</div>
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Responsiivisia muunnelmia on myös 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

Tilaus

Muuta tiettyjen joustotuotteiden visuaalista järjestystä muutamalla orderapuohjelmalla. Tarjoamme vain vaihtoehtoja tehdä nimike ensimmäiseksi tai viimeiseksi, sekä palauttaa DOM-tilauksen käyttöön. Kuten orderminkä tahansa kokonaislukuarvon väliltä 0–5, lisää mukautettu CSS tarvittaville lisäarvoille.

Ensimmäinen joustava tuote
Toinen joustava tuote
Kolmas flex-tuote
html
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

Responsiivisia muunnelmia on myös 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

Lisäksi on myös responsiivisia .order-firstja .order-lastluokkia, jotka muuttavat orderelementin soveltamista order: -1ja order: 6vastaavasti.

  • .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

Tasaa sisältö

Käytä align-contentflexbox-säiliöiden apuohjelmia kohdistaaksesi flex-kohteet yhteen poikkiakselilla . Valitse start(selaimen oletusarvo), end, center, between, around, tai stretch. Näiden apuohjelmien esittelemiseksi olemme ottaneet flex-wrap: wrapkäyttöön ja lisänneet joustavien tuotteiden määrää.

Varoitus! Tällä ominaisuudella ei ole vaikutusta yksittäisiin taipuisiin tuotteisiin.

Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex align-content-end flex-wrap">...</div>
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex align-content-center flex-wrap">...</div>
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex align-content-between flex-wrap">...</div>
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex align-content-around flex-wrap">...</div>
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
Flex-tuote
<div class="d-flex align-content-stretch flex-wrap">...</div>

Responsiivisia muunnelmia on myös 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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Mediaobjekti

Haluatko kopioida mediaobjektikomponentin Bootstrap 4:stä? Luo se hetkessä uudelleen muutamilla joustavilla apuohjelmilla, jotka mahdollistavat entistä enemmän joustavuutta ja mukauttamista.

Placeholder Image
Tämä on sisältöä mediakomponentista. Voit korvata tämän millä tahansa sisällöllä ja muokata sitä tarpeen mukaan.
html
<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>

Ja sano, että haluat keskittää sisällön pystysuoraan kuvan viereen:

Placeholder Image
Tämä on sisältöä mediakomponentista. Voit korvata tämän millä tahansa sisällöllä ja muokata sitä tarpeen mukaan.
html
<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>

Sass

Utilities API

Flexbox-apuohjelmat on ilmoitettu apuohjelmien API:ssa vuonna scss/_utilities.scss. Opi käyttämään apuohjelmien sovellusliittymää.

    "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
    ),
    "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,
      ),
    ),