Kursinhalt
Tailwind CSS für Webentwicklung
Tailwind CSS für Webentwicklung
Flexbox-Dienstprogramme
Tailwind CSS bietet Utility-Klassen, die es Ihnen ermöglichen, flexible und responsive Layouts mit Flexbox einfach zu erstellen. Diese Utilities ermöglichen es Ihnen, das Design und die Ausrichtung von Elementen innerhalb eines Containers zu steuern.
Display auf Flex setzen
Um ein Element für sein Layout Flexbox verwenden zu lassen, können Sie die flex Klasse verwenden. Diese Klasse setzt die display Eigenschaft auf flex.
index.html
In diesem Beispiel macht die flex-Klasse auf dem übergeordneten div es zu einem Flex-Container, und die untergeordneten divs (flex-1) verteilen den Raum gleichmäßig.
Steuerung der Flex-Richtung
Flex-Richtungs-Dienstprogramme ermöglichen es Ihnen, die Richtung zu steuern, in der die Flex-Elemente im Container platziert werden. Sie können die Richtung auf Reihe (Standard), Spalte, Reihenumkehr oder Spaltenumkehr mit den folgenden Klassen einstellen:
| Klasse | Beschreibung |
|---|---|
flex-row | Platziert Elemente in einer Reihe (Standard). |
flex-col | Platziert Elemente in einer Spalte. |
flex-row-reverse | Platziert Elemente in einer umgekehrten Reihe. |
flex-col-reverse | Platziert Elemente in einer umgekehrten Spalte. |
index.html
In diesem Beispiel setzt die Klasse flex-col die Flex-Richtung auf Spalte und stapelt die Elemente vertikal.
Ausrichtung von Elementen horizontal
Die justify-content Utilities steuern die horizontale Ausrichtung von Elementen innerhalb eines Flex-Containers. Die verfügbaren Klassen sind:
| Klasse | Beschreibung |
|---|---|
justify-start | Richtet Elemente am Anfang aus. |
justify-center | Richtet Elemente in der Mitte aus. |
justify-end | Richtet Elemente am Ende aus. |
justify-between | Verteilt Elemente gleichmäßig mit Platz dazwischen. |
justify-around | Verteilt Elemente gleichmäßig mit Platz um sie herum. |
justify-evenly | Verteilt Elemente gleichmäßig mit gleichem Platz um sie herum. |
index.html
In diesem Beispiel zentriert die Klasse justify-center die Elemente horizontal innerhalb des Flex-Containers.
Vertikale Ausrichtung von Elementen
Die Utilities zur Ausrichtung von Elementen steuern die vertikale Ausrichtung von Elementen innerhalb eines Flex-Containers. Die verfügbaren Klassen sind:
| Klasse | Beschreibung |
|---|---|
items-start | Richtet Elemente am Anfang aus. |
items-center | Richtet Elemente in der Mitte aus. |
items-end | Richtet Elemente am Ende aus. |
items-baseline | Richtet Elemente entlang ihrer Grundlinie aus. |
items-stretch | Dehnt Elemente aus, um den Container zu füllen (Standard). |
index.html
In diesem Beispiel zentriert die Klasse items-center die Elemente vertikal innerhalb des Flex-Containers.
Hinweis
Wenn Sie nach etwas Speziellem suchen, folgen Sie bitte dem Link.
1. Welche Klasse setzt die display-Eigenschaft auf flex?
2. Wie setzt man die Flex-Richtung auf Spalte?
3. Welche Klasse zentriert Elemente in einem Flex-Container horizontal?
4. Welche Utility-Klasse zentriert Elemente vertikal in einem Flex-Container?
Danke für Ihr Feedback!
