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">I'm a flexbox container!</div><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.
<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.
<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.
<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).
<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).
<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.
<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.
<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.
<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).
<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.
<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.
<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.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.
<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.
<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.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.
<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:
<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,
),
),