Flexbox ist eine unglaublich nützliche Webentwicklungstechnik, mit der Sie flexible und adaptive Layouts erstellen können. Allerdings kann es für unerfahrene Entwickler schwierig sein, alle Funktionen und Funktionen von Flexbox zu beherrschen. In diesem Leitfaden erklären wir Ihnen, wie Sie Flexbox verwenden und es zu einem einfachen und unkomplizierten Werkzeug machen.
Flexbox bietet uns die Möglichkeit, die Anordnung und Ausrichtung der Elemente innerhalb des Containers einfach zu steuern. Es basiert auf dem Konzept der Achsen, bei denen jeder Container eine Achse hat, an der die Elemente ausgerichtet werden können. Achsen kann horizontal (X-Achse) oder vertikal (Y-Achse) sein.
Um flexbox zu verwenden, müssen Sie dem übergeordneten Container eine Eigenschaft zuweisen display: flex. Die untergeordneten Elemente werden dann automatisch entsprechend der Achse und den übrigen Flexbox-Eigenschaften innerhalb des Containers platziert. Aber das ist nicht alles, Flexbox bietet auch eine Reihe interessanter Eigenschaften, mit denen Sie einzigartige Layouts erstellen können.
Was ist eine Flexbox und wofür wird sie benötigt
Der Hauptvorteil von flexbox besteht darin, dass Sie adaptive Layouts erstellen können, ohne komplexe Stile und Skripte verwenden zu müssen. Mit ein paar einfachen Eigenschaften wie display: flex und flex-direction Sie können die Reihenfolge und Ausrichtung von Elementen im Container ändern.
Flexbox ist besonders nützlich für die Erstellung komplexer Layouts wie Navigationsmenüs, Bildergalerien, Kartennetze und vieles mehr. Es bietet Flexibilität und einfache Verwaltung von Elementen, wodurch die Entwicklung und Wartung von Websites vereinfacht wird.
Anleitung zur Verwendung von Flexbox
Um Flexbox zu verwenden, müssen Sie Stile für das übergeordnete Element angeben, das als Container für andere Elemente verwendet werden soll. Legen Sie dazu die display-Eigenschaft auf flex fest. Zum Beispiel:
.container
Jetzt werden alle untergeordneten Elemente im Container abhängig von den angegebenen Eigenschaften in einer Zeile oder Spalte ausgerichtet. Verwenden Sie dazu die flex-direction-Eigenschaft. Der row-Wert gibt die Ausrichtung an der Zeile an, und der column-Wert gibt die Ausrichtung an der Spalte an. Zum Beispiel:
.container
Verwenden Sie die flex-grow-Eigenschaft, um sicherzustellen, dass Elemente den verfügbaren Platz im Container einnehmen. Der Wert 1 gibt an, dass der verfügbare Raum gleichmäßig zwischen den Elementen verteilt wird. Zum Beispiel:
.container
Mit Flexbox können Sie auch die Anzeigereihenfolge von Elementen mithilfe der order-Eigenschaft steuern. Je kleiner der Wert ist, desto früher wird das Element auf der Seite angezeigt. Zum Beispiel:
.item
Verwenden Sie die align-items-Eigenschaft, um die Ausrichtung von Elementen an einer Achse senkrecht zur Richtungsachse zu steuern. Der Wert center richtet die Elemente in der Mitte aus, und der Wert flex-start richtet die Elemente am Anfang des Containers aus. Zum Beispiel:
.container
Flexbox bietet viele andere Eigenschaften zum Erstellen flexibler Layouts. Eine vollständige Liste der Flexbox-Funktionen und -Optionen finden Sie in der Dokumentation.
Schritt 1: Installieren des Flex-Containers
Dazu müssen Sie den folgenden CSS-Code auf den Container anwenden:
.flex-container
Nachdem Sie diese Eigenschaft angewendet haben, werden alle untergeordneten Elemente des Flex-Containers standardmäßig in einer Zeile (horizontal) angeordnet. Wenn Sie Elemente vertikal positionieren möchten, fügen Sie dem Container einfach die flex-direction: column; -Eigenschaft hinzu.
Schritt 2: Definieren von Achsen und Ausrichtung
Nachdem Sie den Container mit der Eigenschaft display: flex; erstellt haben, müssen Sie die Achsen definieren, an denen die Elemente innerhalb des Containers ausgerichtet werden. Standardmäßig werden die Achsen wie folgt festgelegt:
- die Hauptachse (main axis) ist eine horizontale Achse, die vom Anfang bis zum Ende des Containers verläuft. Standardmäßig werden Elemente entlang dieser Achse ausgerichtet;
- eine senkrechte Achse (cross axis) ist eine vertikale Achse, die senkrecht zur Hauptachse steht. Standardmäßig werden die Elemente relativ zu dieser Achse zentriert ausgerichtet.
Sie können die Richtung der Achsen ändern, indem Sie dem Container eine flex-direction-Eigenschaft hinzufügen. Wenn Sie beispielsweise möchten, dass die Elemente vertikal ausgerichtet werden, anstatt sie horizontal auszurichten, legen Sie den Wert column fest :
.container
Neben der Definition von Containerachsen ist es auch wichtig, die align-items-Eigenschaft zu verwenden, um die Ausrichtung von Elementen entlang einer senkrechten Achse festzulegen. Wenn Sie beispielsweise Elemente am linken Rand ausrichten möchten, legen Sie den Wert flex-start fest :
.container
Mit der Eigenschaft align-items können Sie einen der folgenden Werte auswählen:
- flex-start - Ausrichten von Elementen am Anfang einer senkrechten Achse;
- flex-end - Ausrichten von Elementen am Ende einer senkrechten Achse;
- center - zentriert Elemente senkrecht zur Achse;
- stretch - Elemente werden in der Höhe einer senkrechten Achse gestreckt;
- baseline - Elemente werden an der Grundlinie ausgerichtet (z. B. ist die Grundlinie für Text eine Linie, auf der Buchstaben ohne Präfixe und Beschriftungen gedruckt werden).
Das Definieren von Achsen und die Ausrichtung von Elementen spielen eine wichtige Rolle bei der Verwendung des flexiblen Flexbox-Layoutmodells. Mit diesen Eigenschaften können Sie ganz einfach die Platzierung von Elementen in einem Container steuern und flexible Layouts erstellen.
Schritt 3: Verteilen von Elementen innerhalb des Flex-Containers
Dazu können Sie die Eigenschaft verwenden justify-content definiert die horizontale Position der Elemente innerhalb des Containers. Wenn Sie beispielsweise Elemente in der Mitte eines Containers ausrichten möchten, können Sie einen Wert verwenden center.
Eine weitere nützliche Eigenschaft - align-items definiert die vertikale Position der Elemente. Wenn Sie Elemente vertikal zentriert ausrichten möchten, können Sie den Wert verwenden center.
Sie können die Eigenschaft auch verwenden flex-direction, um die Richtung zu ändern, in der sich die Elemente innerhalb des Containers befinden. Bedeutung row positioniert die Elemente horizontal und der Wert column - senkrecht.
Mit einer Kombination dieser Eigenschaften können Sie Elemente in einem Flex-Container einfach verteilen und eine Vielzahl von Layouts erstellen.
