Bootstrap-4- Flex
Bootstrap-4-Flex
Verwenden Sie Flex-Klassen, um das Layout von Bootstrap 4-Komponenten zu steuern.
Flexbox
Der größte Unterschied zwischen Bootstrap 3 und Bootstrap 4 besteht darin, dass Bootstrap 4 jetzt Flexbox anstelle von Floats verwendet, um das Layout zu verwalten.
Das Flexible-Box-Layout-Modul erleichtert das Entwerfen einer flexiblen, responsiven Layoutstruktur ohne Verwendung von Float oder Positionierung. Wenn Sie Flex noch nicht kennen, können Sie in unserem CSS-Flexbox-Tutorial nachlesen .
Hinweis: Flexbox wird in IE9 und früheren Versionen nicht unterstützt.
Wenn Sie IE8-9-Unterstützung benötigen, verwenden Sie Bootstrap 3. Es ist die stabilste Version von Bootstrap und wird weiterhin vom Team für kritische Bugfixes und Dokumentationsänderungen unterstützt. Es werden jedoch keine neuen Funktionen hinzugefügt.
Verwenden Sie die Klasse, um einen Flexbox-Container zu erstellen und direkte Kinder in Flex-Elemente umzuwandeln d-flex:
Beispiel
Beispiel
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Um einen Inline-Flexbox-Container zu erstellen, verwenden Sie die d-inline-flexKlasse:
Beispiel
Beispiel
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Horizontale Richtung
Verwenden Sie .flex-rowdiese Option, um die Flex-Elemente horizontal (nebeneinander) anzuzeigen. Dies ist Standard.
Tipp: Verwenden Sie .flex-row-reverse
, um die horizontale Richtung rechtsbündig auszurichten:
Beispiel
Beispiel
<div class="d-flex flex-row
bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Vertikale Richtung
Verwenden Sie .flex-columndiese Option, um die Flex-Elemente vertikal (übereinander) anzuzeigen oder .flex-column-reverse
um die vertikale Richtung umzukehren:
Beispiel
Beispiel
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Inhalt begründen
Verwenden Sie die .justify-content-*Klassen, um die Ausrichtung von Flex-Elementen zu ändern. Gültige Klassen sind start(Standard), end, center, betweenoder around:
Beispiel
Beispiel
<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>
Füllen / Gleiche Breite
Verwenden Sie .flex-filles für Flex-Elemente, um sie in gleiche Breiten zu zwingen:
Beispiel
Beispiel
<div class="d-flex">
<div class="p-2 bg-info
flex-fill">Flex
item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
Wachsen
Verwenden Sie .flex-grow-1es auf einem Flex-Element, um den Rest des Platzes einzunehmen. Im folgenden Beispiel nehmen die ersten beiden Flex-Elemente ihren erforderlichen Platz ein, während das letzte Element den Rest des verfügbaren Platzes einnimmt:
Beispiel
Beispiel
<div class="d-flex">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
Tipp: Verwenden Sie .flex-shrink-1es auf einem Flex-Element, um es bei Bedarf schrumpfen zu lassen.
Befehl
Ändern Sie die visuelle Reihenfolge eines oder mehrerer bestimmter Flex-Elemente mit den .orderKlassen. Gültige Klassen sind von 0 bis 12, wobei die niedrigste Zahl die höchste Priorität hat (Order-1 wird vor Order-2 angezeigt usw.):
Beispiel
Beispiel
<div class="d-flex bg-secondary">
<div class="p-2 bg-info
order-3">Flex
item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1">Flex item 3</div>
</div>
Automatische Ränder
Fügen Sie flexiblen Elementen einfach automatische Ränder hinzu , indem Sie ( .mr-autoElemente nach rechts verschieben) oder verwenden .ml-auto(Elemente nach links verschieben):
Beispiel
Beispiel
<div class="d-flex
bg-secondary">
<div class="p-2 mr-auto bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex bg-secondary">
<div
class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 ml-auto bg-primary">Flex item
3</div>
</div>
Wickeln
.flex-nowrapSteuern Sie mit (Standard) .flex-wrapoder , wie Flex-Elemente in einem Flex-Container verpackt werden .flex-wrap-reverse.
Klicken Sie auf die Schaltflächen unten, um den Unterschied zwischen den drei Klassen zu sehen, indem Sie die Verpackung der Flex-Elemente in der Beispielbox ändern:
Beispiel
Beispiel
<div class="d-flex flex-wrap">..</div>
<div class="d-flex
flex-wrap-reverse">..</div>
<div class="d-flex
flex-nowrap">..</div>
Inhalt ausrichten
Kontrollieren Sie die vertikale Ausrichtung der gesammelten Flex-Items mit den .align-content-*
Klassen. Gültige Klassen sind .align-content-start(Standard) , .align-content-end, .align-content-center, .align-content-betweenund ..align-content-around.align-content-stretch
Hinweis: Diese Klassen haben keine Auswirkungen auf einzelne Zeilen von Flex-Elementen.
Beispiel
Beispiel
<div class="d-flex flex-wrap
align-content-start">..</div>
<div class="d-flex
flex-wrap align-content-end">..</div>
<div class="d-flex
flex-wrap align-content-center">..</div>
<div class="d-flex
flex-wrap align-content-around">..</div>
<div class="d-flex
flex-wrap align-content-stretch">..</div>
Elemente ausrichten
Steuern Sie die vertikale Ausrichtung einzelner Zeilen von Flex-Elementen mit den .align-items-*
Klassen. Gültige Klassen sind .align-items-start, .align-items-end, .align-items-center, .align-items-baselineund .align-items-stretch
(Standard).
Klicken Sie auf die Schaltflächen unten, um den Unterschied zwischen den fünf Klassen zu sehen:
Beispiel
Beispiel
<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>
Sich selbst ausrichten
Steuern Sie die vertikale Ausrichtung eines bestimmten Flex-Elements mit den .align-self-*
Klassen. Gültige Klassen sind .align-self-start, .align-self-end, .align-self-center, .align-self-baselineund .align-self-stretch
(Standard).
Klicken Sie auf die Schaltflächen unten, um den Unterschied zwischen den fünf Klassen zu sehen:
Beispiel
Beispiel
<div class="d-flex bg-light" style="height:150px">
<div
class="p-2 border">Flex item 1</div>
<div class="p-2 border
align-self-start">Flex item 2</div>
<div
class="p-2 border">Flex item 3</div>
</div>
Responsive Flex-Klassen
All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.
The * symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.
| Class | Description | Example |
|---|---|---|
| Flex Container | ||
.d-*-flex |
Creates a flexbox container for different screens | |
.d-*-inline-flex |
Creates an inline flexbox container for different screens | |
| Direction | ||
.flex-*-row |
Display flex items horizontally on different screens | |
.flex-*-row-reverse |
Display flex items horizontally, and right-aligned, on different screens | |
.flex-*-column |
Display flex items vertically on different screens | |
.flex-*-column-reverse |
Display flex items vertically, with reversed order, on different screens screens | |
| Justified Content | ||
.justify-content-*-start |
Display flex items from the start (left-aligned) on different screens | |
.justify-content-*-end |
Display flex items at the end (right-aligned) on different screens | |
.justify-content-*-center |
Display flex items in the center of a flex container on different screens | |
.justify-content-*-between |
Display flex items in "between" on different screens | |
.justify-content-*-around |
Display flex items "around" on different screens | |
| Fill / Equal Width | ||
.flex-*-fill |
Force flex items into equal widths on different screens | |
| Grow | ||
.flex-*-grow-0 |
Don't make the items grow on different screens | |
.flex-*-grow-1 |
Make items grow on different screens | |
| Shrink | ||
.flex-*-shrink-0 |
Don't make the items shrink on diferent screens | |
.flex-*-shrink-1 |
Make items shrink on different screens | |
| Order | ||
.order-*-0-12 |
Change the order from 0 to 12 on small screens | |
| Wrap | ||
.flex-*-nowrap |
Don't wrap items on different screens | |
.flex-*-wrap |
Wrap items on different screens | |
.flex-*-wrap-reverse |
Reverse the wrapping of items on different screens | |
| Align Content | ||
.align-content-*-start |
Align gathered items from the start on different screens | |
.align-content-*-end |
Align gathered items at the end on different screens | |
.align-content-*-center |
Align gathered items in the center on different screens | |
.align-content-*-around |
Align gathered items "around" on different screens | |
.align-content-*-stretch |
Stretch gathered items on different screens | |
| Align Items | ||
.align-items-*-start |
Align single rows of items from the start on different screens | |
.align-items-*-end |
Align single rows of items at the end on different screens | |
.align-items-*-center |
Align single rows of items in the center on different screens | |
.align-items-*-baseline |
Align single rows of items on the baseline on different screens | |
.align-items-*-stretch |
Stretch single rows of items on different screens | |
| Align Self | ||
.align-self-*-start |
Align a flex item from the start on different screens | |
.align-self-*-end |
Align a flex item at the end on different screens | |
.align-self-*-center |
Align a flex item in the center on different screens | |
.align-self-*-baseline |
Align a flex item on the baseline on different screens | |
.align-self-*-stretch |
Stretch a flex item on different screens |