Wie kann ein CSS-Raster Zeilen gleicher Höhe erreichen, während dies bei Flexbox nicht möglich ist?

Zeilen gleicher Höhe im CSS-Rasterlayout

Die Verwendung von Flexbox zum Erreichen gleicher Zeilenhöhen ist unpraktisch, da Zeilenhöhen nur die darin enthaltenen Elemente aufnehmen können. CSS Grid bietet jedoch eine Lösung.

Das Prinzip

Um ein Raster mit Zeilen gleicher Höhe zu erstellen, ist die Einstellung aller Zeilen auf „Grid-Auto-Rows: 1fr“ der Schlüssel.

Die Technik

Die fr-Einheit im Rasterlayout weist den Platz gleichmäßig zu, basierend auf dem verfügbaren freien Platz darin Der Behälter. Bei Anwendung auf Zeilen (grid-auto-rows: 1fr) beansprucht jede Zeile den gleichen Anteil dieses freien Speicherplatzes.

Der Grund hinter der Magie

Grid-Layout-Spezifikationen geben an, dass beim Umgang mit Bei einem Raster mit flexibler Größe (unbestimmte Höhe) passen sich Rasterspuren (Zeilen) der Höhe ihres Inhalts an. Das höchste Element in jeder Reihe bestimmt die Höhe aller Reihen. Diese maximale Höhe wird zur Länge für 1fr, was zu gleichen Reihenhöhen führt.

Warum Flexbox nicht ausreicht

Flexbox erlaubt nur Reihen gleicher Höhe innerhalb derselben Reihe, wodurch es für Kreuz ungeeignet ist -Zeilenausgleich. Gemäß der Flexbox-Spezifikation wird die Zeilenhöhe in mehrzeiligen Containern durch die Mindesthöhe bestimmt, die zur Aufnahme der flexiblen Elemente erforderlich ist.

Das obige ist der detaillierte Inhalt vonWie kann ein CSS-Raster Zeilen gleicher Höhe erreichen, während dies bei Flexbox nicht möglich ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!