in English

Flex

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.

Op dëser Säit

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!

html

<div class="d-flex p-2">I'm a flexbox container!</div>

Ech sinn en Inline Flexbox Container!

html

<div class="d-inline-flex p-2">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

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>

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

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>

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, around, oder evenly.

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

<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 selwer

Benotzt align-selfUtilities op Flexbox Elementer fir individuell hir Ausrichtung op der Kräizachs 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

Ausgeriicht flex Element

Flex Artikel

Ausgeriicht flex Element

Flex Artikel

Ausgeriicht flex Element

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 enger Serie vu Geschwësterelementer fir se an d'Breeten ze zwéngen, déi gläich wéi hiren Inhalt sinn (oder gläiche Breeten, wann hiren Inhalt hir Grenzkëschten net iwwerschreift) wärend all verfügbare horizontale Raum ophëlt.

Flex Element mat vill Inhalt

Flex Artikel

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>

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

Wuessen 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

Drëtt Flex Element

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>

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

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>

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 zimmlech genial Saache maachen wann Dir Flex Ausrichtung 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

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>

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

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>

Wickelen

Änneren wéi Flex Elementer 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

<div class="d-flex flex-nowrap">
  ...
</div>

Flex Artikel

<div class="d-flex flex-wrap">
  ...
</div>

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, füügt personaliséiert CSS fir all zousätzlech Wäerter dobäi.

Éischt flex Element

Zweet flex Element

Drëtt Flex Element

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>

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, around, oder stretch. Fir dës Utilitys ze demonstréieren, hu mir flex-wrap: wrapd'Zuel vu Flexartikelen ëmgesat an erhéicht.

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

Flex Artikel

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Flex Artikel

<div class="d-flex align-content-end flex-wrap">...</div>

Flex Artikel

<div class="d-flex align-content-center flex-wrap">...</div>

Flex Artikel

<div class="d-flex align-content-between flex-wrap">...</div>

Flex Artikel

<div class="d-flex align-content-around flex-wrap">...</div>

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

Medien Objet

Sicht Dir de Medienobjektkomponent 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.

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.

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>

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

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.

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