Layout-Steuerung mit Flexbox-Dienstprogrammen
Tailwind CSS stellt Utility-Klassen bereit, mit denen sich flexible und responsive Layouts mithilfe von Flexbox einfach erstellen lassen. Diese Utilities ermöglichen die Steuerung von Gestaltung und Ausrichtung der Elemente innerhalb eines Containers.
Anzeige auf Flex setzen
Um ein Element für das Layout mit Flexbox zu verwenden, kann die Klasse flex genutzt werden. Diese Klasse setzt die Eigenschaft display auf flex.
index.html
In diesem Beispiel macht die Klasse flex das übergeordnete div zu einem Flex-Container, und die untergeordneten divs (flex-1) verteilen den verfügbaren Platz gleichmäßig.
Steuerung der Flex-Richtung
Mit Flex-Richtungs-Utilities kann die Richtung festgelegt werden, in der die Flex-Elemente im Container angeordnet werden. Die Richtung kann auf Zeile (Standard), Spalte, Zeile umgekehrt oder Spalte umgekehrt mit den folgenden Klassen gesetzt werden:
| Klasse | Beschreibung |
|---|---|
flex-row | Ordnet Elemente in einer Zeile an (Standard). |
flex-col | Ordnet Elemente in einer Spalte an. |
flex-row-reverse | Ordnet Elemente in einer umgekehrten Zeile an. |
flex-col-reverse | Ordnet Elemente in einer umgekehrten Spalte an. |
index.html
In diesem Beispiel legt die Klasse flex-col die Flex-Richtung auf Spalte fest und stapelt die Elemente vertikal.
Elemente horizontal ausrichten
Die Justify-Content-Utilities steuern die horizontale Ausrichtung der Elemente innerhalb eines Flex-Containers. Die verfügbaren Klassen sind:
| Klasse | Beschreibung |
|---|---|
justify-start | Richtet Elemente am Anfang aus. |
justify-center | Richtet Elemente zentriert aus. |
justify-end | Richtet Elemente am Ende aus. |
justify-between | Verteilt Elemente gleichmäßig mit Abstand zwischen ihnen. |
justify-around | Verteilt Elemente gleichmäßig mit Abstand um sie herum. |
justify-evenly | Verteilt Elemente gleichmäßig mit gleichem Abstand um sie herum. |
index.html
In diesem Beispiel zentriert die Klasse justify-center die Elemente horizontal innerhalb des Flex-Containers.
Vertikales Ausrichten von Elementen
Die Align-Items-Utilities 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 zentriert aus. |
items-end | Richtet Elemente am Ende aus. |
items-baseline | Richtet Elemente entlang ihrer Grundlinie aus. |
items-stretch | Streckt Elemente, um den Container auszufüllen (Standard). |
index.html
In diesem Beispiel zentriert die Klasse items-center die Elemente vertikal innerhalb des Flex-Containers.
Hinweis
Wenn Sie nach etwas Bestimmtem suchen, folgen Sie bitte dem Link.
1. Welche Klasse setzt die Eigenschaft display auf flex?
2. Wie stellt man die Flex-Richtung auf Spalte ein?
3. Welche Klasse zentriert Elemente horizontal in einem Flex-Container?
4. Welche Utility-Klasse zentriert Elemente vertikal in einem Flex-Container?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you show me an example of using these Tailwind Flexbox classes?
What are some common use cases for Flexbox in Tailwind CSS?
How do I combine multiple flex utilities for more complex layouts?
Awesome!
Completion rate improved to 3.57Layout-Steuerung mit Flexbox-Dienstprogrammen
Swipe um das Menü anzuzeigen
Tailwind CSS stellt Utility-Klassen bereit, mit denen sich flexible und responsive Layouts mithilfe von Flexbox einfach erstellen lassen. Diese Utilities ermöglichen die Steuerung von Gestaltung und Ausrichtung der Elemente innerhalb eines Containers.
Anzeige auf Flex setzen
Um ein Element für das Layout mit Flexbox zu verwenden, kann die Klasse flex genutzt werden. Diese Klasse setzt die Eigenschaft display auf flex.
index.html
In diesem Beispiel macht die Klasse flex das übergeordnete div zu einem Flex-Container, und die untergeordneten divs (flex-1) verteilen den verfügbaren Platz gleichmäßig.
Steuerung der Flex-Richtung
Mit Flex-Richtungs-Utilities kann die Richtung festgelegt werden, in der die Flex-Elemente im Container angeordnet werden. Die Richtung kann auf Zeile (Standard), Spalte, Zeile umgekehrt oder Spalte umgekehrt mit den folgenden Klassen gesetzt werden:
| Klasse | Beschreibung |
|---|---|
flex-row | Ordnet Elemente in einer Zeile an (Standard). |
flex-col | Ordnet Elemente in einer Spalte an. |
flex-row-reverse | Ordnet Elemente in einer umgekehrten Zeile an. |
flex-col-reverse | Ordnet Elemente in einer umgekehrten Spalte an. |
index.html
In diesem Beispiel legt die Klasse flex-col die Flex-Richtung auf Spalte fest und stapelt die Elemente vertikal.
Elemente horizontal ausrichten
Die Justify-Content-Utilities steuern die horizontale Ausrichtung der Elemente innerhalb eines Flex-Containers. Die verfügbaren Klassen sind:
| Klasse | Beschreibung |
|---|---|
justify-start | Richtet Elemente am Anfang aus. |
justify-center | Richtet Elemente zentriert aus. |
justify-end | Richtet Elemente am Ende aus. |
justify-between | Verteilt Elemente gleichmäßig mit Abstand zwischen ihnen. |
justify-around | Verteilt Elemente gleichmäßig mit Abstand um sie herum. |
justify-evenly | Verteilt Elemente gleichmäßig mit gleichem Abstand um sie herum. |
index.html
In diesem Beispiel zentriert die Klasse justify-center die Elemente horizontal innerhalb des Flex-Containers.
Vertikales Ausrichten von Elementen
Die Align-Items-Utilities 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 zentriert aus. |
items-end | Richtet Elemente am Ende aus. |
items-baseline | Richtet Elemente entlang ihrer Grundlinie aus. |
items-stretch | Streckt Elemente, um den Container auszufüllen (Standard). |
index.html
In diesem Beispiel zentriert die Klasse items-center die Elemente vertikal innerhalb des Flex-Containers.
Hinweis
Wenn Sie nach etwas Bestimmtem suchen, folgen Sie bitte dem Link.
1. Welche Klasse setzt die Eigenschaft display auf flex?
2. Wie stellt man die Flex-Richtung auf Spalte ein?
3. Welche Klasse zentriert Elemente horizontal in einem Flex-Container?
4. Welche Utility-Klasse zentriert Elemente vertikal in einem Flex-Container?
Danke für Ihr Feedback!
