Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun

Schnell verwalten de Layout, d'Ausrichtung an d'Gréisst vun de Gitterkolonnen, Navigatioun, Komponenten a méi mat enger voller Suite vu reaktiounsfäeger Flexbox Utilities. Fir méi komplex Implementatiounen kann personaliséiert CSS néideg sinn.

Aktivéiert flex Verhalen

Benotzt displayUtilities fir e Flexbox Container ze kreéieren an direkt Kanner Elementer a Flex Elementer ze transforméieren. Flex Behälter an Artikele kënne weider geännert ginn mat zousätzlech Flexeigenschaften.

Ech sinn e Flexbox Container!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Ech sinn en Inline Flexbox Container!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Reaktiounsfäeger Variatiounen existéieren och fir .d-flexan .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

Richtung

Setzt d'Richtung vu Flexartikelen an engem Flexbehälter mat Direktiounsservicer. An deene meeschte Fäll kënnt Dir déi horizontal Klass hei ausgoen well de Browser Standard ass row. Wéi och ëmmer, Dir kënnt Situatiounen stousse wou Dir dëse Wäert explizit musst setzen (wéi reaktiounsfäeg Layouten).

Benotzt .flex-rowfir eng horizontal Richtung ze setzen (de Browser-Standard), oder .flex-row-reversefir déi horizontal Richtung vun der Géigendeel Säit unzefänken.

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

Benotzt .flex-columnfir eng vertikal Richtung ze setzen, oder .flex-column-reversefir déi vertikal Richtung vun der Géigendeel Säit unzefänken.

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

Reaktiounsfäeger Variatiounen existéieren och fir 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

Justifiéieren Inhalt

Benotzt justify-contentUtilities op Flexbox Container fir d'Ausrichtung vu Flexartikelen op der Haaptachs z'änneren (d'X-Achs fir ze starten, Y-Achs wann flex-direction: column). Wielt aus start(Browser Standard), end, center, between, aroundoder evenly.

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

Reaktiounsfäeger Variatiounen existéieren och fir 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

Elementer ausriichten

Benotzt align-itemsUtilities op Flexbox Container fir d'Ausrichtung vu Flexartikelen op der Kräizachs z'änneren (d'Y-Achs fir unzefänken, x-Achs wann flex-direction: column). Wielt aus start, end, center, baseline, oder stretch(Browser Standard).

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

Reaktiounsfäeger Variatiounen existéieren och fir 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

Alignéieren selwer

Benotzt align-selfUtilities op Flexbox Elementer fir hir Ausrichtung op der Kräizachs individuell z'änneren (d'Y-Achs fir unzefänken, x-Achs wann flex-direction: column). Wielt aus de selwechten Optiounen wéi align-items: start, end, center, baseline, oder stretch(Browser Standard).

Flex Artikel
Ausgeriicht flex Element
Flex Artikel
Flex Artikel
Ausgeriicht flex Element
Flex Artikel
Flex Artikel
Ausgeriicht flex Element
Flex Artikel
Flex Artikel
Ausgeriicht flex Element
Flex Artikel
Flex Artikel
Ausgeriicht flex Element
Flex Artikel
<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>

Reaktiounsfäeger Variatiounen existéieren och fir 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

Fëllt

Benotzt d' .flex-fillKlass op eng Serie vu Geschwësterelementer fir se a Breeten ze zwéngen, déi gläich wéi hiren Inhalt sinn (oder gläich Breet wann hiren Inhalt hir Grenzkëschten net iwwerschreift) wärend all verfügbare horizontale Raum ophëlt.

Flex Element mat vill Inhalt
Flex Artikel
Flex Artikel
<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>

Reaktiounsfäeger Variatiounen existéieren och fir flex-fill.

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

Wuesse a schrumpfen

Benotzt .flex-grow-*Utilities fir d'Fäegkeet vun engem Flexartikel ze wiesselen fir ze wuessen fir verfügbare Raum ze fëllen. Am Beispill hei drënner .flex-grow-1benotzen d'Elementer all verfügbare Raum et kann, wärend déi aner zwee Flexartikelen hiren néidege Raum erlaben.

Flex Artikel
Flex Artikel
Drëtt Flex Element
<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>

Benotzt .flex-shrink-*Utilities fir d'Fäegkeet vun engem Flexartikel ze schrumpfen wann néideg. Am Beispill hei ënnendrënner ass den zweeten Flex Element mat .flex-shrink-1gezwongen säin Inhalt op eng nei Linn ze wéckelen, "schrumpft" fir méi Plaz fir de fréiere Flex Element mat .w-100.

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

Reaktiounsfäeger Variatiounen existéieren och fir flex-growan 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 Margen

Flexbox kann e puer flott fantastesch Saache maachen wann Dir Flex Ausriichtungen mat Automargen mëscht. Hei ënnendrënner sinn dräi Beispiller fir d'Kontroll vu Flexartikelen iwwer Automargen: Standard (keng Automarge), zwee Elementer no riets drécken ( .me-auto), an zwee Elementer no lénks drécken ( .ms-auto).

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

Mat alignéieren Artikelen

Vertikal réckelen ee Flex Element op d'Spëtzt oder ënnen vun engem Container andeems Dir align-items, flex-direction: column, an margin-top: autooder margin-bottom: auto.

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

Wickelen

Ännere wéi Flex Artikelen an engem Flex Container wéckelen. Wielt aus guer keng Wrapping (de Browser Standard) mat .flex-nowrap, Wrapping mat .flex-wrap, oder ëmgedréint Wrapping mat .flex-wrap-reverse.

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

Reaktiounsfäeger Variatiounen existéieren och fir 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

Uerdnung

Ännert d' visuell Uerdnung vu spezifesche Flexartikele mat enger Handvoll orderUtilities. Mir bidden nëmmen Optiounen fir en Element éischt oder lescht ze maachen, souwéi e Reset fir d'DOM Bestellung ze benotzen. Wéi orderall ganz Zuel Wäert vun 0 bis 5 hëlt, addéiere personaliséiert CSS fir all zousätzlech Wäerter déi néideg sinn.

Éischt Flex Element
Zweet flex Element
Drëtt Flex Element
<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>

Reaktiounsfäeger Variatiounen existéieren och fir 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

Zousätzlech ginn et och reaktiounsfäeger .order-firsta .order-lastKlassen déi den orderElement vun engem Element änneren andeems Dir order: -1an order: 6bzw.

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

Alignéieren Inhalt

Benotzt align-contentUtilities op Flexbox Behälter fir Flex Elementer zesummen op der Kräizachs ze alignéieren. Wielt aus start(Browser Standard), end, center, between, aroundoder stretch. Fir dës Utilities ze demonstréieren, hu mir flex-wrap: wrapd'Zuel vun de Flexartikelen ëmgesat an erhéicht.

Kapp erop! Dëse Besëtz huet keen Effekt op eenzel Zeile vu Flexartikelen.

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

Reaktiounsfäeger Variatiounen existéieren och fir 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

Medien Objet

Sicht Dir de Medieobjektkomponent vu Bootstrap 4 ze replizéieren? Erstellt et a kenger Zäit mat e puer Flex Utilities déi nach méi Flexibilitéit a Personnalisatioun erlaben wéi virdrun.

Placeholder Image
Dëst ass e puer Inhalter vun enger Medienkomponent. Dir kënnt dëst duerch all Inhalt ersetzen an et ajustéieren wéi néideg.
<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>

A sot Dir wëllt den Inhalt nieft dem Bild vertikal zentréieren:

Placeholder Image
Dëst ass e puer Inhalter vun enger Medienkomponent. Dir kënnt dëst duerch all Inhalt ersetzen an et ajustéieren wéi néideg.
<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 Utilities ginn an eiser Utilities API deklaréiert an scss/_utilities.scss. Léiert wéi Dir d'Utilities API benotzt.

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