Source

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.

Ich bin ein Flexbox-Container!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Ich bin ein Inline-Flexbox-Container!
<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.

Flexartikel 1
Flexartikel 2
Flexartikel 3
Flexartikel 1
Flexartikel 2
Flexartikel 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>

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

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>

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

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>

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

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

Füllen

Verwenden Sie die .flex-fillKlasse für eine Reihe von gleichgeordneten Elementen, um sie in gleiche Breiten zu zwingen und dabei den gesamten verfügbaren horizontalen Platz einzunehmen. Besonders nützlich für die Navigation in gleicher Breite oder im Blocksatz.

Flex-Artikel
Flex-Artikel
Flex-Artikel
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</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.

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

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

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 .

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="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.

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>

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

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.

Erstes Flex-Element
Zweites Flex-Element
Drittes 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>

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.

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>

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