Svetuka kune chikuru content Svetuka kuenda kudocs navigation

Kurumidza gadzirisa dhizaini, kurongeka, uye saizi yemakoramu egidhi, kufambisa, zvikamu, uye nezvimwe zvine sutu izere yeinoteerera flexbox utilities. Kuti uwane mamwe maitiro akaoma, tsika CSS inogona kudikanwa.

Bvumira flex maitiro

Shandisa displayzvinoshandiswa kugadzira flexbox mudziyo uye shandura yakananga vana zvinhu kuita zvinhu zvinochinjika. Flex midziyo uye zvinhu zvinokwanisa kugadziridzwa zvakare nekuwedzera flex zvivakwa.

Ndiri flexbox mudziyo!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Ndiri inline flexbox mudziyo!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Misiyano inopindura iripo zvakare .d-flexuye .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

Direction

Gadzirisa mafambiro ezvinhu zvinochinjika mumudziyo unochinjika une nzira yekushandisa. Kazhinji unogona kusiya kirasi yakatwasuka pano sezvo browser default iri row. Nekudaro, iwe unogona kusangana nemamiriro ezvinhu apo iwe waida kujekesa kukosha uku (senge inoteerera marongero).

Shandisa .flex-rowkuseta yakachinjika gwara (iyo browser default), kana .flex-row-reversekutanga yakachinjika nzira kubva kune yakatarisana.

Flex chinhu 1
Flex chinhu 2
Flex chinhu 3
Flex chinhu 1
Flex chinhu 2
Flex chinhu 3
<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>

Shandisa .flex-columnkumisa gwara rakati kwara, kana .flex-column-reversekutanga iro rakati chechetere kubva kune rimwe divi.

Flex chinhu 1
Flex chinhu 2
Flex chinhu 3
Flex chinhu 1
Flex chinhu 2
Flex chinhu 3
<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>

Misiyano inopindura iripo zvakare kune 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

Ruramisa zvirimo

Shandisa justify-contentzvinoshandiswa pamidziyo yeflexbox kushandura kurongeka kwezvinhu zvinoshanduka pane axis huru (iyo x-axis yekutanga, y-axis kana flex-direction: column). Sarudza kubva start(browser default), end, center, between, around, kana evenly.

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

Misiyano inopindura iripo zvakare kune 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

Rongedza zvinhu

Shandisa align-itemszvinoshandiswa pamidziyo yeflexbox kushandura kurongeka kwezvinhu zvinochinjika pamuchinjiko axis (iyo y-axis yekutanga, x-axis kana flex-direction: column). Sarudza kubva start, end, center, baseline, kana stretch(browser default).

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

Misiyano inopindura iripo zvakare kune 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

Zvigadzirise

Shandisa align-selfzvinoshandiswa pazvinhu zveflexbox kuti uchinje kurongeka kwavo pamuchinjiko axis (iyo y-axis yekutanga, x-axis kana flex-direction: column). Sarudza kubva pane dzimwe sarudzo se align-items: start, end, center, baseline, kana stretch(browser default).

Flex chinhu
Aligned flex chinhu
Flex chinhu
Flex chinhu
Aligned flex chinhu
Flex chinhu
Flex chinhu
Aligned flex chinhu
Flex chinhu
Flex chinhu
Aligned flex chinhu
Flex chinhu
Flex chinhu
Aligned flex chinhu
Flex chinhu
<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>

Misiyano inopindura iripo zvakare kune 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

Zadza

Shandisa .flex-fillkirasi pane zvakatevedzana zvezvinhu zvehama kuvamanikidza muhupamhi hwakaenzana nezviri mukati mavo (kana hupamhi hwakaenzana kana zvirimo zvisingapfuure mabhokisi-bhokisi) uku uchitora nzvimbo yese iripo yakachinjika.

Flex chinhu chine zvakawanda zvemukati
Flex chinhu
Flex chinhu
<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>

Misiyano inopindura iripo zvakare kune flex-fill.

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

Kura uye kuderera

Shandisa .flex-grow-*zvinoshandiswa kushandura kugona kwechinhu chinoshanduka kuti chikure kuzadza nzvimbo iripo. Mumuenzaniso uri pazasi, .flex-grow-1zvinhu zvinoshandisa zvese zviripo nzvimbo yazvinogona, uku zvichibvumidza izvo zviviri zvasara zvinhu zvinochinjika nzvimbo yavo inodiwa.

Flex chinhu
Flex chinhu
Chechitatu flex chinhu
<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>

Shandisa .flex-shrink-*zvinoshandiswa kushandura kugona kwechimwe chinhu kuderera kana zvichidikanwa. Mumuenzaniso uri pazasi, chinhu chechipiri chinochinjika nacho .flex-shrink-1chinomanikidzwa kuputira zvirimo kumutsara mutsva, "kuderera" kubvumira nzvimbo yakawanda yechinhu chekare chekare ne .w-100.

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

Misiyano inopindura iripo zvakare flex-growuye 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

Auto margins

Flexbox inogona kuita zvimwe zvinhu zvinokatyamadza kana iwe uchisanganisa kuchinjika kuchinjika neauto margin. Inoratidzwa pazasi mienzaniso mitatu yekudzora zvinhu zvinochinjika kuburikidza neauto margin: default (hapana auto margin), kusundira zvinhu zviviri kurudyi ( .me-auto), uye kusundira zvinhu zviviri kuruboshwe ( .ms-auto).

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

Nekugadzirisa-zvinhu

Fambisa chinhu chimwe chete kumusoro kana kuzasi kwegaba nekusanganisa align-items, flex-direction: column, uye margin-top: autokana margin-bottom: auto.

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

Wrap

Shandura kuti zvinhu zvinochinjika zvinoputira sei mugaba reflex. Sarudza kubva pasina kuputira zvachose (iyo browser default) ne .flex-nowrap, kuputira ne .flex-wrap, kana kudzosera kumashure kuputira ne .flex-wrap-reverse.

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

Misiyano inopindura iripo zvakare kune 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

Order

Shandura kurongeka kwekuona kwezvinhu zvakachinjika zvine mashoma ekushandisa order. Isu tinongopa sarudzo dzekugadzira chinhu chekutanga kana chekupedzisira, pamwe nekugadzirisa zvakare kushandisa iyo DOM odha. Sezvinotora orderchero huwandu hunokosha kubva pa0 kusvika pa5, wedzera tsika CSS kune chero humwe hunokosha hunodiwa.

Chekutanga flex chinhu
Chechipiri flex chinhu
Chechitatu flex chinhu
<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>

Misiyano inopindura iripo zvakare kune 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

Pamusoro pezvo kune zvakare anopindura .order-firstuye .order-lastmakirasi anoshandura iyo orderyechinhu nekushandisa order: -1uye order: 6, zvichiteerana.

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

Rongedza zvirimo

Shandisa align-contentzvinoshandiswa pamidziyo yeflexbox kurongedza zvinhu zvinochinjika pamwechete pamuchinjiko axis. Sarudza kubva start(browser default), end, center, between, around, kana stretch. Kuratidza zvishandiso izvi, takamanikidza flex-wrap: wrapuye nekuwedzera huwandu hwezvinhu zvinochinjika.

Musoro! Ichi chivakwa hachina mhedzisiro pamitsetse imwechete yezvinhu zvinochinjika.

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

Misiyano inopindura iripo zvakare kune 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

Media chinhu

Kutsvaga kudzokorora iyo midhiya chinhu chikamu kubva kuBootstrap 4? Igadzirise pasina nguva nemashandisirwo mashoma anobvumira kuchinjika uye kugadzirisa kupfuura kare.

Placeholder Image
Izvi zvimwe zvemukati kubva muchikamu chenhau. Unogona kutsiva izvi nechero zvirimo uye wozvigadzirisa sezvinodiwa.
<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>

Uye uti iwe unoda kuisa pakati pemukati zviri mukati padivi pemufananidzo:

Placeholder Image
Izvi zvimwe zvemukati kubva muchikamu chenhau. Unogona kutsiva izvi nechero zvirimo uye wozvigadzirisa sezvinodiwa.
<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

Purogiramu inonzi Utilities

Flexbox utilities inoziviswa mune yedu zvishandiso API mu scss/_utilities.scss. Dzidza mashandisiro ezvishandiso 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,
      ),
    ),