in English

Biegen

Verwalten Sie schnell das Layout, die Ausrichtung und die Größe von Rasterspalten, Navigation, Komponenten und mehr mit einer vollständigen Suite reaktionsschneller Flexbox-Dienstprogramme. Für komplexere Implementierungen kann benutzerdefiniertes CSS erforderlich sein.

Auf dieser Seite

Flex-Verhalten aktivieren

Wenden Sie displayDienstprogramme an, um einen Flexbox-Container zu erstellen und direkt untergeordnete Elemente in Flex-Elemente umzuwandeln. Flex-Container und -Elemente können mit zusätzlichen Flex-Eigenschaften weiter modifiziert werden.

Ich bin ein Flexbox-Container!

html

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

Ich bin ein Inline-Flexbox-Container!

html

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

Responsive Variationen existieren auch für .d-flexund .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

Legen Sie die Richtung von Flex-Elementen in einem Flex-Container mit Richtungsdienstprogrammen fest. In den meisten Fällen können Sie die horizontale Klasse hier weglassen, da der Standardwert des Browsers ist row. Es können jedoch Situationen auftreten, in denen Sie diesen Wert explizit festlegen mussten (z. B. responsive Layouts).

Verwenden Sie diese Option .flex-row, um eine horizontale Richtung festzulegen (Standardeinstellung des Browsers) oder .flex-row-reverseum die horizontale Richtung von der gegenüberliegenden Seite zu beginnen.

Flexartikel 1

Flexartikel 2

Flexartikel 3

Flexartikel 1

Flexartikel 2

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

Verwenden Sie .flex-column, um eine vertikale Richtung festzulegen oder .flex-column-reverseum die vertikale Richtung von der gegenüberliegenden Seite zu beginnen.

Flexartikel 1

Flexartikel 2

Flexartikel 3

Flexartikel 1

Flexartikel 2

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

Responsive Variationen gibt es auch für 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

Inhalt begründen

Verwenden Sie justify-contentDienstprogramme für Flexbox-Container, um die Ausrichtung von Flex-Elementen auf der Hauptachse zu ändern (die x-Achse zum Starten, die y-Achse, wenn flex-direction: column). Wählen Sie 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>

Responsive Variationen gibt es auch für 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

Elemente ausrichten

Verwenden Sie align-itemsDienstprogramme für Flexbox-Container, um die Ausrichtung von Flex-Elementen auf der Querachse zu ändern (die y-Achse zum Starten, x-Achse, wenn flex-direction: column). Wählen Sie zwischen start, end, center, baselineoder stretch(Standardeinstellung des Browsers).

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>

Responsive Variationen gibt es auch für 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

Sich selbst ausrichten

Verwenden Sie align-selfDienstprogramme für Flexbox-Elemente, um ihre Ausrichtung auf der Querachse individuell zu ändern (die y-Achse zu Beginn, x-Achse, wenn flex-direction: column). Wählen Sie aus den gleichen Optionen wie align-items: start, end, center, baseline, oder stretch(Browser-Standard).

Flex-Artikel

Ausgerichtetes Flex-Element

Flex-Artikel

Ausgerichtetes Flex-Element

Flex-Artikel

Ausgerichtetes Flex-Element

Flex-Artikel

Ausgerichtetes Flex-Element

Flex-Artikel

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

Responsive Variationen gibt es auch für 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üllen

Verwenden Sie die .flex-fillKlasse für eine Reihe von Geschwisterelementen, um sie in Breiten zu zwingen, die ihrem Inhalt entsprechen (oder gleiche Breiten, wenn ihr Inhalt ihre Rahmen nicht überschreitet), während sie den gesamten verfügbaren horizontalen Platz einnehmen.

Flex-Element mit viel 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>

Responsive Variationen gibt es auch für flex-fill.

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

Wachsen und schrumpfen

Verwenden Sie .flex-grow-*Dienstprogramme, um die Fähigkeit eines Flex-Elements ein- und auszuschalten, um den verfügbaren Platz zu füllen. Im Beispiel unten .flex-grow-1verwenden die Elemente den gesamten verfügbaren Platz, während sie den verbleibenden zwei Flex-Elementen den erforderlichen Platz einräumen.

Flex-Artikel

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

Verwenden Sie .flex-shrink-*Dienstprogramme, um die Schrumpffähigkeit eines Flex-Elements bei Bedarf umzuschalten. Im Beispiel unten wird das zweite Flex-Element mit .flex-shrink-1gezwungen, seinen Inhalt in eine neue Zeile zu „schrumpfen“, um mehr Platz für das vorherige Flex-Element mit zu schaffen .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>

Responsive Variationen existieren auch für flex-growund 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

Automatische Ränder

Flexbox kann einige ziemlich tolle Dinge tun, wenn Sie flexible Ausrichtungen mit automatischen Rändern mischen. Unten sehen Sie drei Beispiele für die Steuerung von Flex-Elementen über automatische Ränder: Standard (kein automatischer Rand), zwei Elemente nach rechts verschieben ( .me-auto) und zwei Elemente nach links verschieben ( .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>

Mit Alignment-Items

Verschieben Sie ein Flex-Element vertikal an die Ober- oder Unterseite eines Containers, indem Sie align-items, flex-direction: column, und margin-top: autooder mischen 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>

Wickeln

Ändern Sie, wie Flex-Elemente in einem Flex-Container verpackt werden. Wählen Sie zwischen „überhaupt kein Umbruch“ (Standardeinstellung des Browsers) mit .flex-nowrap, Umbruch mit .flex-wrapoder umgekehrter Umbruch mit .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>

Responsive Variationen gibt es auch für 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

Befehl

Ändern Sie die visuelle Reihenfolge bestimmter Flex-Elemente mit einer Handvoll orderDienstprogrammen. Wir bieten nur Optionen zum Erstellen eines Artikels an erster oder letzter Stelle sowie eine Zurücksetzung zur Verwendung der DOM-Bestellung. Da orderjeder ganzzahlige Wert von 0 bis 5 akzeptiert wird, fügen Sie benutzerdefiniertes CSS für alle zusätzlich benötigten Werte hinzu.

Erstes Flex-Element

Zweites Flex-Element

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

Responsive Variationen gibt es auch für 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

Darüber hinaus gibt es auch responsive .order-firstund .order-lastKlassen, die die ordereines Elements ändern, indem sie order: -1bzw. anwenden order: 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

Inhalte ausrichten

Verwenden Sie Dienstprogramme auf Flexbox-Containern, um Flex-Elemente aneinander auf der Querachse align-contentauszurichten . Wählen Sie aus (Browser-Standard), , , , , oder . Um diese Dienstprogramme zu demonstrieren, haben wir die Anzahl der Flex-Elemente erzwungen und erhöht.startendcenterbetweenaroundstretchflex-wrap: wrap

Kopf hoch! Diese Eigenschaft hat keine Auswirkung auf einzelne Zeilen von Flex-Elementen.

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>

Responsive Variationen gibt es auch für 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

Medienobjekt

Möchten Sie die Medienobjektkomponente von Bootstrap 4 replizieren ? Erstellen Sie es im Handumdrehen mit ein paar flexiblen Dienstprogrammen neu, die noch mehr Flexibilität und Anpassung als zuvor ermöglichen.

Dies ist ein Inhalt aus einer Medienkomponente. Diesen können Sie durch beliebige Inhalte ersetzen und bei Bedarf anpassen.

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>

Angenommen, Sie möchten den Inhalt vertikal neben dem Bild zentrieren:

Dies ist ein Inhalt aus einer Medienkomponente. Diesen können Sie durch beliebige Inhalte ersetzen und bei Bedarf anpassen.

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

Dienstprogramme-API

Flexbox-Dienstprogramme werden in unserer Dienstprogramm-API in scss/_utilities.scss. Erfahren Sie, wie Sie die Utilities-API verwenden.

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