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.

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.

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

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

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.

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

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

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

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

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, betweenoder around.

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

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-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around

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

<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

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

<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

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.

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

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

• .flex-fill
• .flex-sm-fill
• .flex-md-fill
• .flex-lg-fill
• .flex-xl-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.

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

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.

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

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

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 ( .mr-auto) und zwei Elemente nach links verschieben ( .ml-auto).

Leider unterstützen IE10 und IE11 automatische Ränder bei Flex-Elementen, deren Eltern einen nicht standardmäßigen justify-contentWert haben, nicht richtig. Weitere Informationen finden Sie in dieser StackOverflow-Antwort .

<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="mr-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="ml-auto p-2 bd-highlight">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.

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

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.

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

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

<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

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 (z. B. 5) akzeptiert wird, fügen Sie benutzerdefiniertes CSS für alle zusätzlich benötigten Werte hinzu.

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

Responsive Variationen gibt es auch für order.

• .order-0
• .order-1
• .order-2
• .order-3
• .order-4
• .order-5
• .order-6
• .order-7
• .order-8
• .order-9
• .order-10
• .order-11
• .order-12
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-sm-6
• .order-sm-7
• .order-sm-8
• .order-sm-9
• .order-sm-10
• .order-sm-11
• .order-sm-12
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-md-6
• .order-md-7
• .order-md-8
• .order-md-9
• .order-md-10
• .order-md-11
• .order-md-12
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-lg-6
• .order-lg-7
• .order-lg-8
• .order-lg-9
• .order-lg-10
• .order-lg-11
• .order-lg-12
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xl-6
• .order-xl-7
• .order-xl-8
• .order-xl-9
• .order-xl-10
• .order-xl-11
• .order-xl-12

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.

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

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

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

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

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

<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