Flexbox -Klassen in Bootstrap 5 | Erklärt
In diesem Artikel handelt
- Flexbox -Behälter
- Flexbox -Anweisungen
- Inhalt rechtfertigen
- Elemente ausrichten
- Verpackungsklassen
- Selbst ausrichten
Bootstrap 5 Flex -Klassen
D-Flex
In Bootstrap 5 Flex -Containern werden durch die Verwendung der Erstellung der Erstellung des .D-Flex Klasse. D-Flex Der Klassencontainer erweitert sich auf die Vollbreite.
Code
Box1
Box2
Box3
Box4
.D-*-Flex wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
D-Inline-Flex
In Bootstrap 5 Flex -Containern werden durch die Verwendung der Erstellung der Erstellung des .D-Inline-Flex Klasse. D-Inline-Flex Der Klassencontainer erweitert sich entsprechend der Anzahl der Elemente und den darin enthaltenen Elementen in den Inhaltensbereich.
Code
Box1
Box2
Box3
Box4
.D-*-Inline-Flex wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Flex -Richtungen
Flex-Row-Reverse
.Flex-Row-Reverse Die Klasse wird verwendet, um die Richtung der Elemente umgekehrt zu ändern. Diese Flexbox -Klasse wird nur mit dem verwendet .Reihe Klasse. Diese Klasse wird auch mit verschiedenen Haltepunkten verwendet
Code
Box1
Box2
Box3
Box4
.Flex-*-Reihen-Umkehr wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Flex-Säule
.Flex-Säule Die Klasse wird verwendet, um Zeilen in Spalten umzuwandeln. Diese Klasse wird auch mit dem verwendet .Reihe Klasse.
Code
Box1
Box2
Box3
Box4
.Flex-*-Spalte wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Flex-Säule-Renverse
.Flex-Säule-Renverse Klasse, Zeilen in Spalten umwandeln und auch die Richtung der Flexelemente umgekehrt ändern. Diese Klasse wird auch mit verwendet .Reihe Klasse.
Code
Box1
Box2
Box3
Box4
.Flex-*-Säulenreverse wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Flex-Wrap
.Flex-Wrap Die Klasse wird verwendet, um die Elemente in den Container zu wickeln, und mit dieser Klasse wird der Überlauf der Flex -Elemente verwaltet. Standardmäßig werden Elemente verpackt, aber Sie können diese Klasse trotzdem verwenden, um die Elemente zu wickeln, die
überläuft den Flexbehälter.
Code
Box1
Box2
Box3
Box4
.Flex-*-Wrap wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Flex-nowrap
.flex-nowrap Die Klasse wird verwendet, bei der Ihre Flex-Elemente nicht verpackt werden sollen, da standardmäßig Flexelemente aufgrund ihres reaktionsschnellen Verhaltens in den Flex-Container eingewickelt werden.
Code
Box1
Box2
Box3
Box4
.flex-*-nowrap wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Flex-Wrap-Umkehr
.Flex-Wrap-Umkehr Die Klasse wird nicht nur verwendet, um Flexelemente in einen Behälter zu wickeln, sondern auch ihre Bestellung umzukehren.
Code
Box1
Box2
Box3
Box4
.Flex-*-Wrap-Reverse wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Flex-Fill
.Flex-Fill Klasse wird nur mit dem verwendet .Col -Klasse ohne Bruchpunkt oder Breite. Die Flex-Fill-Klasse nimmt die 100% ige Breite des Behälters an und zwingt die anderen Flex-Elemente, um den Raum gleichen. Die Flex-Fill-Klasse kann auf mehrere Flex-Elemente und nur auf den Flex-Elementen angewendet werden.
Code
Box1
Box2
Box3
Box4
.flex-*-füllen wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Inhalt rechtfertigen
Justify-Incontent-Klassen werden verwendet, um Flexelemente in einer Zeilenrichtung oder mit anderen Worten entlang der Hauptachse zu rechtfertigen.
Rechtfertigungsstart
.Rechtfertigungsstart Klasse bewegt die Flexelemente auf die linke Seite des Behälters. Diese Klasse wird nur mit dem verwendet .D-Flex-Klasse.
Code
Box1
Box2
Box3
Box4
Box5
.Justify-Incontent-*-Starten Sie wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Justify-Content-End
.Justify-Content-End Klasse bewegt die Flexelemente auf die rechte Seite des Behälters. Diese Klasse wird nur mit dem verwendet .D-Flex Klasse.
Code
Box1
Box2
Box3
Box4
Box5
.Justify-Incontent-*-Ende wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Rechtfertigungs-in-Center
.Rechtfertigungs-in-Center Klasse, sammeln Sie alle Flexgegenstände in der Mitte des Behälters. Diese Klasse wird nur mit dem verwendet .D-Flex Klasse.
Code
Box1
Box2
Box3
Box4
Box5
.Justify-Incontent-*-Mitte wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Begründung zwischeneinander
.Begründung zwischeneinander Die Klasse wird verwendet, um Räume zwischen den Flexgegenständen zu platzieren. Diese Klasse platziert den ersten Flex -Element zu Beginn des Containers und den letzten Flexelement am Ende des Containers und teilt den gesamten Raum gleichermaßen zwischen den verbleibenden Flex -Elementen auf .Diese Klasse wird nur mit dem verwendet .D-Flex Klasse.
Code
Box1
Box2
Box3
Box4
Box5
.Rechtfertigungsbekämpfung-*-Zwischen wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Gerechtfertigte Inhalt
.gerechtfertigte Inhalt Die Klasse wird verwendet, um den Raum gleichermaßen unter allen Flex-Elementen zu teilen. Diese Klasse wird nur mit dem verwendet .D-Flex Klasse.
Code
Box1
Box2
Box3
Box4
Box5
.Rechtfertigungsbekämpfung-*-herum wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Inhalt ausrichten
Ausgerichtungsklassen werden verwendet, um den Inhalt in Spaltenrichtung oder nur mit anderen Worten entlang der Kreuzachse auszurichten. Verwenden Sie die Flexelemente, um die Flex -Elemente auszurichten, die .D-Flex-Klasse mit dem .Flex-Wrap Klasse.
Ausrichtungsstart
.Ausrichtungsstart Klasse, richten Sie die Flexelemente oben im Behälter aus.
Code
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
Box9
Box10
Box11
Box12
.Align-items-*-Start wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Align-items-Ende
.Align-items-Ende Klasse, richten Sie die Flexelemente am unteren Rand des Behälters aus.
Code
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
Box9
Box10
Box11
Box12
.Align-items-*-Ende wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Ausrichtungs-Items-Center
.Ausrichtungs-Items-Center Klasse, vertikal zentriert die Flexelemente in einem Behälter.
Code
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
Box9
Box10
Box11
Box12
.Align-items-*-Mitte wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Align-items-Baseline
.Align-items-Baseline Klasse, richten Sie den Inhalt in den Kästchen nach der Hauptachse aus.
Code
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
.Align-items-*-Grundlinie wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Ausrichtungs-Items-Stretch
.Ausrichtungs-Items-Stretch Klasse, erweitern Sie die Flex -Elemente senkrecht nach der Höhe des Behälters.
Code
Box1
Box2
Box3
Box4
.Align-items-*-Stretch wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klasse auch für andere Bildschirme reagiert.
Selbst ausrichten
.selbst ausrichten Klasse ist genau wie .Ausrichtung Klasse, aber der Unterschied zwischen beiden Klassen ist .Align-items wird auf den Flex-Behälter angewendet und behandelt alle Flex-Elemente mit derselben Klasse, die von Flex Container zu diesem Zeitpunkt verwendet wird, aber die .selbst ausrichten Die Klasse wird auf einzelner Flexartikel angewendet und behandelt einen einzelnen Flexelement.
Im Folgenden sind die .Ausrichtungs-Selbst-Klassen, die auf Flexartikeln verwendet werden
- .Ausrichtungs-Selbst-Start
- .Ausrichtungs-Selbst-End
- .Ausrichtungs-Selbst-Center
- .Ausrichtungs-Selbst-Baseline
- .Ausrichtungs-Selbst-Stretch
.Ausrichtung selbst-*-Start/Ende/Mitte/Baseline/Stretch wird auch mit Haltepunkten verwendet (*) Symbol mit XXL, XL, LG, MD oder SM. Die Verwendung von Haltepunkten macht diese Klassen auch für andere Bildschirme reagiert.
Abschluss
Flexbox-Klassen werden mit der D-Flex-Klasse in Bootstrap 5 verwendet, um den Inhalt entweder in Zeilen oder in Spalten zu rechtfertigen, auszurichten und zu verwalten. In den obigen Artikel Flex Container -Klassen, Flex -Richtungsklassen, Wickelklassen, Flex -Rechtfertigung der Klassen, um die Elemente in einer Zeile zu rechtfertigen, die Ausrichtung des Flex -Aussagens, um den Inhalt in der Spalte auszurichten, und die Klassen für die Ausrichtung der Elemente selbst werden ausführlich besprochen.