In der Webentwicklung gibt es viele Möglichkeiten, Elemente auf einer Seite zu platzieren. Und einer der beliebtesten und bequemsten ist die Verwendung von Flexcontainern. Der Flexcontainer ermöglicht eine einfache und flexible Steuerung der Anordnung und des Verhaltens von Elementen innerhalb des Containers.
Das Erstellen eines Flexcontainers erfordert nicht viel Code. Nur ein paar CSS-Zeilen reichen aus, um einen normalen Block in einen flexiblen Flexcontainer zu verwandeln. Um dies zu tun, wenden Sie die Display-Eigenschaft auf das übergeordnete Element mit dem Wert flex oder inline-flex an. Dies eröffnet die Möglichkeit eines Flexmodells, das den Containerraum in flexible Bereiche aufteilt, in denen sich die Elemente befinden.
Mit dem Flexcontainer können Sie die Reihenfolge, die Abmessungen, den Raum zwischen den Elementen und vieles mehr anpassen. Mit den Eigenschaften flex-direction, justify-content, align-items und anderen können Sie das Aussehen und Layout eines Containers und seines Inhalts einfach ändern. Außerdem werden Flex-Container mit Medienabfragen sehr gut verstanden, was sie für die Erstellung reaktionsfähiger und responsiver Webseiten sehr praktisch macht.
Was ist ein Flexcontainer
Um einen Flexcontainer in HTML zu erstellen, wird die CSS-Eigenschaft verwendet display: flex. Nachdem Sie diese Eigenschaft einem Container hinzugefügt haben, werden alle untergeordneten Elemente zu Flexelementen und können ihre Parameter verwalten.
Der Flexcontainer hat zwei Hauptachsen: die Hauptachse (main axis) und die Querachse (cross axis). Die Hauptachse kann je nach Eigenschaftswert horizontal oder vertikal sein flex-direction das kann sein row (horizontal) oder column (vertikale). Die Querachse ist immer senkrecht zur Hauptachse.
Mit einem Flexcontainer können Sie die Ausrichtung und Verteilung von Flexelementen mithilfe von Eigenschaften wie justify-content (ausrichtung an der Hauptachse) und align-items (Querachsenausrichtung). Sie können auch die Bemaßungen von Flex-Elementen mithilfe der Eigenschaft festlegen flex oder geben Sie ihre Reihenfolge mithilfe der Eigenschaft an order.
Die Verwendung von Flexcontainern erleichtert die Erstellung adaptiver und flexibler Layouts, da Sie die Anordnung und Größe von Elementen auf einer Seite leicht steuern können. Flexcontainer sind ein wichtiger Teil der modernen Webentwicklung und werden häufig verwendet, um verschiedene Komponenten wie Menüs, Galerien, Formulare und vieles mehr zu erstellen.
Schritt 1: Erstellen eines Containers
Normalerweise wird ein Flexcontainer als Element bezeichnet, das mehrere untergeordnete Elemente enthält, die wir mit CSS-Eigenschaften verwalten werden. Um einen Flexcontainer zu erstellen, legen Sie einfach eine Klasse oder eine ID für das entsprechende Element fest.
Wenn Sie beispielsweise einen Flexcontainer mit der Klasse "container" erstellen möchten, können Sie den folgenden Code verwenden:
Jetzt haben Sie eine grundlegende Flexcontainerstruktur. In den nächsten Schritten werden wir CSS-Eigenschaften hinzufügen und anpassen, um die erforderlichen Parameter für unseren Flexcontainer festzulegen.
Hinzufügen von Stilen
Um einen Flexcontainer zu erstellen, müssen Sie Stile hinzufügen. Dazu können Sie CSS-Code verwenden.
Zuerst müssen Sie die Stile für den Container selbst festlegen. Sie können dazu eine Klasse oder eine ID verwenden. Fügen Sie zum Beispiel die Klasse "flex-container" für den Container hinzu:
.flex-container
In diesem Beispiel verwenden wir die Eigenschaft "display: flex", das angibt, dass der Container die Flexbox-Eigenschaften verwendet. Mit der Eigenschaft "flex-wrap: wrap" können Elemente in eine neue Zeile verschoben werden, wenn nicht genügend Platz vorhanden ist. Die Eigenschaften "justify-content: center" und "align-items: center" zentrieren die Elemente horizontal bzw. vertikal.
Außerdem können Sie für jedes Element innerhalb des Containers zusätzliche Stile festlegen. Zum Beispiel:
.flex-item
In diesem Beispiel verwenden wir die Eigenschaft "flex: 1 1 300px", die die Elastizität des Elements angibt. Der erste Wert gibt an, wie weit das Element gedehnt werden kann, der zweite Wert gibt an, wie viel sich das Element ausdehnen kann, und der dritte gibt seine Anfangslänge an. Die Eigenschaft "margin: 10px" fügt einen Einzug zwischen den Elementen hinzu.
Dadurch können Sie die entsprechenden Stile für den Container und die Elemente hinzufügen, um einen Flexcontainer zu erstellen und sein Aussehen und Verhalten anzupassen.
Schritt 2: Hinzufügen von Elementen zum Container
Sie müssen die Eigenschaft verwenden, um dem Container Elemente hinzuzufügen display: flex; in CSS, um anzugeben, dass Elemente als Flex-Elemente dargestellt werden.
Im folgenden Beispiel wird ein Flexcontainer mit der Klasse "flex-container" erstellt. Dann werden drei Elemente hinzugefügt: Element 1 ,
und Element 3. Alle diese Elemente werden durch Verwendung der Eigenschaft als Flex-Elemente dargestellt display: flex;.
Verwenden von Tags
Es gibt viele Tags in HTML, mit denen Sie den Inhalt einer Webseite strukturieren können. Einige sind besonders nützlich beim Erstellen eines Flexcontainers:
- : das primäre Blockelement, mit dem Sie einen Container erstellen können, in dem sich der Inhalt des Flexcontainers befindet
: tag für Textabsätze; nützlich für die Erstellung einer Beschreibung oder Erläuterung von Flexcontainerelementen
-
und
: tags zum Erstellen einer Liste; sie können sie verwenden, um die Elemente eines Flexcontainers als Liste anzuzeigen
- : tag zum Erstellen eines Listenelements; es kann innerhalb von Tags verwendet werden
-
und
zum Auflisten von Flexcontainerelementen
Dies ist nur eine kleine Liste von Tags, mit denen Sie einen Flexcontainer erstellen können. Abhängig von den spezifischen Anforderungen des Projekts stehen weitere Tags zur Verfügung, die bei der Strukturierung des Inhalts und beim Erreichen des gewünschten Designs helfen können.
Schritt 3: Anpassen der Flexcontainereigenschaften
Nachdem wir unseren Container im HTML-Markup definiert haben, müssen wir seine Eigenschaften mit CSS anpassen, um das gewünschte Aussehen und Verhalten unserer Elemente zu erhalten.
Es gibt mehrere Eigenschaften, mit denen Sie einen Flexcontainer konfigurieren können:
| Eigenschaft | Bedeutung | Die Beschreibung |
|---|---|---|
| display | flex | Setzt das Element als Flexcontainer ein |
| flex-direction | row | row-reverse | column | column-reverse | Legt die Position der Elemente im Container fest |
| justify-content | flex-start | flex-end | center | space-between | space-around | Richtet Elemente entlang der Hauptachse des Containers aus |
| align-items | flex-start | flex-end | center | baseline | stretch | Richtet Elemente entlang der Querachse des Containers aus |
| flex-wrap | nowrap | wrap | wrap-reverse | Bestimmt, ob Elemente in eine neue Zeile verschoben werden, wenn im Container kein Platz mehr vorhanden ist |
| flex-flow | flex-direction flex-wrap | Abgekürzte Eigenschaft für die Installation flex-direction und flex-wrap |
Durch die Anpassung der Kombination dieser Eigenschaften können wir verschiedene Layouts und Ausrichtungen der Elemente innerhalb des Flexcontainers erhalten. Experimentieren Sie also und passen Sie die Eigenschaften so an, dass der Container genau so aussieht und sich verhält, wie Sie es sich vorgestellt haben.
Nachdem die Eigenschaften des Flexcontainers konfiguriert sind, können wir die Eigenschaften der Flexcontainer innerhalb des Containers anpassen.
Breite, Ausrichtung und Überbrückungssteuerung
CSS verwendet die Eigenschaft, um die Breite eines Flexcontainers zu steuern flex-wrap. Diese Eigenschaft kann zwei Werte annehmen: nowrap (standardwert) und wrap. Der Wert von nowrap gibt an, dass die Elemente des Containers in einer Zeile platziert werden müssen, ohne in die nächste Zeile zu übertragen. Der Wrap-Wert gibt an, dass Container-Elemente in die nächste Zeile verschoben werden müssen, wenn in der aktuellen Zeile nicht genügend Platz vorhanden ist.
Die Ausrichtung der Elemente innerhalb des Flexcontainers erfolgt mithilfe der Eigenschaft justify-content. Diese Eigenschaft kann verschiedene Werte annehmen, z. B.: flex-start (elemente am linken Rand des Containers ausrichten), flex-end (elemente am rechten Rand des Containers ausrichten), center (elemente in der Mitte des Containers ausrichten), space-between (gleichmäßige Verteilung der Elemente über die gesamte Breite des Containers mit gleichen Abständen zwischen ihnen) und andere.
Wenn Elemente in die nächste Zeile verschoben werden, können Sie mit der Eigenschaft angeben, wie sie in der neuen Zeile ausgerichtet werden sollen align-content. Diese Eigenschaft hat auch verschiedene Bedeutungen wie: flex-start (elemente am oberen Rand des Containers ausrichten), flex-end (elemente am unteren Rand des Containers ausrichten), center (elemente in der Mitte des Containers ausrichten), stretch (dehnen von Elementen auf die gesamte Höhe des Containers) und andere.
Das Verschieben von Elementen in eine neue Zeile wird bei Verwendung von flex-wrap: wrap auch über die Eigenschaft gesteuert flex-basis. Mit dieser Eigenschaft können Sie die Größe jedes Containerelements festlegen. Sie können beispielsweise angeben, dass jedes Element einen bestimmten Prozentsatz der Containerbreite einnimmt, oder für jedes Element eine feste Breite festlegen.
