Wie erstelle ich eine Flexbox aus zwei Zeilen in CSS

Flexbox ist ein leistungsfähiges Werkzeug zum Erstellen eines geordneten und anpassungsfähigen Webseitenlayouts. Es ermöglicht Ihnen, die Anordnung von Elementen in einem Container zu steuern und komplexe Komponenten mit einfachen Regeln einfach zu erstellen.

Eine der nützlichsten Eigenschaften von Flexbox ist die Möglichkeit, Elemente in zwei Zeilen zu organisieren. Dies ist besonders nützlich, wenn Sie Inhalte in zwei logische Gruppen aufteilen möchten, z. B. wenn Sie ein Menü oder eine Liste von Produktkarten erstellen.

In dieser schrittweisen Anleitung erfahren Sie, wie Sie mithilfe der grundlegenden Flexbox-Eigenschaften, einschließlich der Eigenschaften flex-direction, flex-wrap und align-items, eine Flexbox mit zwei Zeilen erstellen.

Legen Sie die Eigenschaft display: flex für den flexbox-Container fest;

Um eine Flexbox mit zwei Zeilen zu erstellen, müssen Sie die Eigenschaft für den Container festlegen display: flex;. Dadurch wird der Container in ein flexibles Modell umgewandelt, in dem die Elemente abhängig von den angegebenen Parametern in eine Zeile oder Spalte ausgerichtet werden.

Um diese Eigenschaft festzulegen, müssen Sie sie einfach in der Stilregel für den Container angeben:

.container display: flex;
>

In diesem Fall wird der container-Klasse die Eigenschaft "display: flex;" zugewiesen, die dem Browser mitteilt, dass die Elemente innerhalb des Containers gemäß dem Flexbox-Modell funktionieren.

Nachdem Sie diese Eigenschaft festgelegt haben, können Sie mit der Konfiguration der Hauptachsen beginnen, die Elemente in die nächste Zeile verschieben und andere Parameter verwenden, die zum Erstellen einer gewünschten Flexbox mit zwei Zeilen erforderlich sind.

Definieren Sie mithilfe der flex-direction-Eigenschaft die Hauptachse für die Anordnung der Elemente;

Um eine Flexbox mit zwei Zeilen zu erstellen, müssen Sie die Hauptachse für die Position der Elemente mithilfe der Eigenschaft definieren flex-direction. Mit dieser Eigenschaft können Sie die Richtung angeben, in der sich die Elemente innerhalb des Containers befinden.

Es gibt vier Werte für die Eigenschaft flex-direction: row, row-reverse, column und column-reverse. Wenn Sie eine Flexbox mit zwei Zeilen erstellen möchten, müssen Sie einen Wert auswählen row.

Wenn Sie beispielsweise eine Flexbox mit zwei Zeilen erstellen und die Elemente horizontal anordnen möchten, müssen Sie die folgende CSS-Regel festlegen:

Danach werden die Elemente, die sich innerhalb des Containers mit der container-Klasse befinden, horizontal in zwei Zeilen angeordnet, beginnend am linken Rand des Containers.

Geben Sie an, wie die Elemente mit der Eigenschaft justify-content entlang der Hauptachse verteilt werden sollen;

Eigenschaft justify-content legt fest, wie die Elemente entlang der Hauptachse des flexiblen Containers verteilt werden. Es steuert die horizontale Ausrichtung der Elemente innerhalb des Containers und kann folgende Werte annehmen:

• flex-start: Die Elemente werden am Anfang der Hauptachse des Containers ausgerichtet.
• flex-end: Die Elemente werden am Ende der Hauptachse des Containers ausgerichtet.
• center: Die Elemente werden in der Mitte der Hauptachse des Containers ausgerichtet.
• space-between: Die Elemente werden gleichmäßig entlang der Hauptachse des Containers verteilt, wobei der gleiche Abstand zwischen ihnen besteht.
• space-around: Elemente werden gleichmäßig entlang der Hauptachse des Containers verteilt, wobei sowohl vor dem ersten als auch nach dem letzten Element gleicher Platz vorhanden ist.
• space-evenly: Elemente werden gleichmäßig entlang der Hauptachse des Containers verteilt, wobei gleicher Abstand zwischen und um sie herum besteht.

Verwenden der Eigenschaft justify-content ermöglicht es Ihnen, die horizontale Anordnung von Elementen in einem flexiblen Behälter effizient zu steuern und verschiedene Designkompositionen zu erstellen.

Legen Sie mithilfe der Eigenschaft align-items die Ausrichtung der Elemente an der Querachse fest

Eigenschaft align-items mit Flexbox können Sie festlegen, wie die Elemente an der Querachse ausgerichtet werden, d. H. An der Achse, die senkrecht zur Hauptachse des Flexcontainers steht.

Eigenschaftswert align-items legt die Ausrichtung für alle Elemente des Containers fest. Sie können verschiedene Werte verwenden, um das gewünschte Ergebnis zu erzielen:

flex-start: die Elemente werden am Anfang der Querachse des Containers ausgerichtet;

flex-end: die Elemente werden am Ende der Querachse des Containers ausgerichtet;

center: die Elemente werden in der Mitte der Querachse des Containers ausgerichtet;

baseline: die Elemente werden an der Grundlinie der Querachse des Containers ausgerichtet, was besonders nützlich ist, um Text in einer Zeile auszurichten;

stretch: elemente werden über die Querachse des Containers gestreckt, wenn sie nicht mit fester Breite oder Höhe angegeben sind.

Eigenschaften anwenden align-items mit dem Flex-Container können Sie die Ausrichtung der Elemente in der zweiten Reihe einfach steuern und das gewünschte Design für Ihre Flexbox-Layoutansicht erstellen.

Geben Sie an, wie der zusätzliche Speicherplatz mithilfe der Flex-Wrap-Eigenschaft zwischen den Elementen verteilt wird

Eigenschaft flex-wrap legt fest, wie bei Bedarf zusätzlicher Speicherplatz auf die Elemente in der Hauptachse des Containers verteilt wird. Diese Eigenschaft kann folgende Werte annehmen:

• nowrap: die Elemente befinden sich in einer Zeile, ohne Zeilenumbruch;
• wrap: wenn Elemente nicht in derselben Zeile platziert werden, werden sie in eine neue Zeile verschoben;
• wrap-reverse: entspricht dem Wert wrap, aber die Elemente werden in umgekehrter Reihenfolge in eine neue Zeile verschoben.

Der Standardwert der Eigenschaft flex-wrap installiert als nowrap, was bedeutet, dass die Elemente in einer Zeile ohne Silbentrennung platziert werden.

Wenn zusätzlicher Speicherplatz zwischen den Elementen zugewiesen werden muss, wird die Eigenschaft flex-wrap ermöglicht dem Container zu bestimmen, ob Elemente in eine neue Zeile verschoben oder in derselben Zeile belassen werden sollen.

Beispiel für die Verwendung einer Eigenschaft flex-wrap:

 
Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5

Mit CSS:

.flex-container-wrap .flex-item

Wenn in diesem Beispiel nicht genügend Platz vorhanden ist, um alle Elemente in einer Zeile zu platzieren, werden sie dank der Eigenschaft in eine neue Zeile verschoben flex-wrap: wrap;.

Richten Sie die Elemente in der zweiten Zeile ggf. mit der Eigenschaft align-content über die Querachse aus.

Wenn Sie zwei Zeilen von Elementen in Ihrem flexbox Container haben und die Elemente in der zweiten Zeile entlang der Querachse ausrichten möchten, können Sie die Eigenschaft align-content verwenden.

Die align-content-Eigenschaft steuert die Ausrichtung des Containers an der Querachse, wenn zusätzlicher Freiraum durch Zeilenelemente belegt ist.

Einige Werte der align-content-Eigenschaft:

• flex-start: Die Elemente werden am Anfang der Querachse des Containers ausgerichtet.
• flex-end: Die Elemente werden am Ende der Querachse des Containers ausgerichtet.
• center: Die Elemente werden in der Mitte der Querachse des Containers ausgerichtet.
• space-between: Die Elemente werden gleichmäßig entlang der Querachse des Containers verteilt.
• space-around: Die Elemente werden gleichmäßig entlang der Querachse des Containers verteilt, mit den gleichen Abständen zwischen ihnen und den Kanten des Containers.

Wenden Sie diese Eigenschaft auf Ihren Flexbox-Container an, um die Elemente in der zweiten Zeile auszurichten, und wählen Sie einen geeigneten Wert aus, um den gewünschten Effekt zu erzielen.