Flexbox oder Flex-Container ist ein Layout, das es Benutzern ermöglicht, Elemente innerhalb eines Containers auszurichten und zu verteilen. Tailwind CSS bietet verschiedene Dienstprogrammklassen zum Erstellen und Arbeiten mit Flexbox. Ein Flex-Container auf Box-Ebene ist ein Flex-Container, der sich wie ein Element auf Block-Ebene verhält/wirkt und einen Block erstellt. Es nimmt die gesamte Breite seines übergeordneten Elements ein und erstellt nach sich selbst eine neue Zeile.
Dieser Artikel veranschaulicht die Methode zum Erstellen eines Flex-Containers auf Blockebene in Tailwind.
Wie erstelle/erstelle ich einen Flex-Container auf Blockebene in Tailwind?
Um einen bestimmten Flex-Container auf Blockebene in Tailwind zu erstellen, erstellen Sie eine HTML-Struktur. Fügen Sie dann das „ biegen ”-Dienstprogrammklasse mit dem gewünschten
Syntax
< div Klasse = 'biegen ...' >
...
div >
Code
< Körper >
< div Klasse = „Flex Gap-2 m-2 Border-2 Border-Black“ >
< div Klasse = „bg-gelb-500 p-4“ > Erster Gegenstand div >
< div Klasse = „bg-gelb-500 p-4“ > Zweiter Punkt div >
< div Klasse = „bg-gelb-500 p-4“ > Dritter Punkt div >
div >
Körper >
Hier im übergeordneten
-
- „ biegen Die Klasse „wird zum Erstellen eines Flex-Containers auf Blockebene verwendet.
- „ Lücke-2 Die Klasse „ fügt 2 Abstandseinheiten zwischen den untergeordneten Elementen von Flex hinzu.
- „ m-2 Die Klasse „Fügt 2 Einheiten Rand zu allen Seiten des Containers hinzu.
- „ Grenze-2 Die Klasse „Fügt dem Container einen Rahmen mit einer Breite von 2 Einheiten hinzu.
- „ Rand-schwarz Die Klasse „Setzt die Rahmenfarbe auf Schwarz.
In den untergeordneten Flex-Elementen:
-
- „ bg-gelb-500 Die Klasse „wendet eine gelbe Farbe auf den Hintergrund des Flex-Elements an.
- „ S. 4 Die Klasse „Fügt die Polsterung von 4 Einheiten auf allen Seiten der Flex-Elemente hinzu.
Ausgang
In der obigen Ausgabe stellt der Rand dar, dass es sich bei dem Container um einen Flex-Container auf Blockebene handelt, der die gesamte Breite seines übergeordneten Elements (Browsers) einnimmt.
Alternativ kann der Benutzer dies sicherstellen, indem er das Flex-Container-Element auf der Webseite überprüft:
Die obige Ausgabe zeigt an, dass es sich bei dem Container um einen Flex-Container auf Blockebene handelt.
Abschluss:
Um einen Flex-Container auf Blockebene in Tailwind zu erstellen, ist es erforderlich, „ biegen ” Dienstprogrammklasse mit dem jeweiligen Container und geben Sie seine untergeordneten Elemente an. Benutzer können flexible Elemente entsprechend ihren Anforderungen definieren und ändern. Fügen Sie zur Überprüfung den Rahmen zum Container hinzu und sehen Sie sich die Webseite an oder überprüfen Sie das Element auf der Webseite. In diesem Artikel wurde die Methode zum Erstellen eines Flex-Containers auf Blockebene in Tailwind erläutert.