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

Zeilen gleicher Höhe mit CSS-Rasterlayout

Im Gegensatz zu Flexbox bietet CSS-Rasterlayout Entwicklern die Möglichkeit, durchgehend gleich hohe Zeilen zu erzielen ein Raster, das Diskrepanzen zwischen den Spalten beseitigt.

Die Rolle des fr Unit

CSS Grid führt die fr-Einheit ein, eine flexible Längeneinheit, die automatisch freien Platz innerhalb eines Grid-Containers verteilt. Bei Anwendung auf alle Zeilen, wie in der folgenden Syntax:

grid-auto-rows: 1fr;

Alle Zeilen gehen von gleichen Höhen aus. Dieses Verhalten ist zwar kontraintuitiv, aber auf ein bestimmtes Merkmal der Rasterspezifikation zurückzuführen.

In Situationen, in denen die Höhe des Rastercontainers unendlich ist, passen sich die FR-Längen dynamisch an die Höhe ihres Inhalts an. In einem Raster mit Zeilen unterschiedlicher Höhe bestimmt beispielsweise die höchste Zeile die maximale Länge von 1 fr, die wiederum die Höhe für alle anderen Zeilen festlegt.

Einschränkungen von Flexbox

Flexbox verfügt nicht über die gleiche Fähigkeit wie CSS Grid, Zeilen gleicher Höhe über mehrere Zeilen hinweg zu erstellen. Gemäß der Flexbox-Spezifikation:

In a multi-line flex container, the cross size of each line is the minimum size necessary to contain the flex items on the line.

Mit anderen Worten: Jede Zeile in einem Flex-Container nimmt die Höhe an, die für die Unterbringung ihrer Elemente erforderlich ist, wodurch eine einheitliche Zeilenhöhe verhindert wird.

Das obige ist der detaillierte Inhalt vonWie kann das CSS-Rasterlayout Zeilen mit 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!