Wie erstelle ich ein zweireihiges Flexbox-Raster mit vier Elementen pro Zeile?

Flexbox: Erstellen eines zweizeiligen Rasters mit vier Elementen pro Zeile

Flexbox bietet ein leistungsstarkes Layoutsystem zum Erstellen dynamischer und reaktionsfähiger Webseiten . Ein häufiger Anwendungsfall besteht darin, ein rasterartiges Layout zu erstellen, das seine Elemente automatisch umschließt und ihre Größe anpasst, wenn sich die Größe des Ansichtsfensters ändert.

Das Problem: Elemente in mehrere Zeilen einschließen

In Ihrem speziellen Szenario stehen Sie vor einem Problem, bei dem Ihr Flexbox-Container acht Artikel in einer einzigen Zeile anzeigt, anstatt sie in zwei Reihen zu je vier Artikeln aufzuteilen jeweils.

Die Lösung: Flexbox-Eigenschaften verstehen

Um die Elemente in zwei Reihen zu zwingen, müssen wir zwei Flexbox-Eigenschaften anpassen: Flex-Wrap und Flex-Grow.

Flex-Wrap: Wrap

Die Flex-Wrap-Eigenschaft steuert, ob die Elemente im Container können mehrere Reihen gebildet werden. Indem Sie es auf „Umbruch“ einstellen, ermöglichen Sie, dass Elemente nach Bedarf in neue Zeilen fließen.

flex-grow: 1

Die Eigenschaft „flex-grow“ steuert, wie die Gegenstände verteilen überschüssigen Platz im Behälter. Ein Wert von 1 bedeutet, dass jedes Element proportional wächst, um den verfügbaren Platz in seiner Zeile zu füllen.

Das Problem: Standardwerte überschreiben

In Ihrem ursprünglichen Code flex -wrap war auf „wrap“ eingestellt, aber „flex-grow“ war für die Flex-Elemente auf 1 gesetzt. Dies führte dazu, dass die Elemente so anwuchsen, dass sie die gesamte verfügbare Breite einnahmen, sodass sie nicht umwickelt werden konnten.

Die Lösung: Elementbreite definieren

Um das Problem zu lösen, müssen wir Folgendes tun Definieren Sie eine bestimmte Breite für die Artikel, damit sie nicht überwuchern und das Einpacken erzwingen. Im korrigierten Code haben wir die Flex-Eigenschaft mit drei Werten verwendet:

1. flex: 1 0 21%; - Der erste Wert (1) setzt den Wachstumsfaktor des Artikels auf 1, was dem Flex-Grow entspricht: 1.
2. flex: 1 0 21%; - Der zweite Wert (0) setzt den Schrumpfungsfaktor des Artikels auf 0, was bedeutet, dass er nicht unter seine angegebene Breite schrumpft.
3. flex: 1 0 21%; - Der dritte Wert (21 %) legt die anfängliche Breite des Artikels auf 21 % der Breite des Behälters fest.

Durch die Definition der Artikelbreite stellen wir sicher, dass sie ordnungsgemäß in zwei Reihen zu je vier Artikeln eingewickelt werden.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein zweireihiges Flexbox-Raster mit vier Elementen pro Zeile?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!