Grid: Ausrichtung

[Rolf B]

Hallo Joe,

bei Flex gibt es die Hauptachse und die Querachse. Eine ist horizontal, die andere vertikal. Aber man kann nicht so einfach sagen, welche Achse wie verläuft. Das hängt von diversen anderen Eigenschaften ab.

Wenn wir erstmal bei „westeuropäischer“ Leserichtung bleiben, dann hängt es vor allem an flex-direction. Da gibt es vier Werte, und jeder davon legt die Hauptachse anders fest:

row

von links nach rechts

row-reverse

von rechts nach links

column

von oben nach unten

column-reverse

von unten nach oben

Die Querachse steht darauf im rechten Winkel. Bei flex-direction:row also von oben nach unten. Bei flex-direction:column von links nach rechts. Bei den reverse-Varianten müsste ich es ausprobieren.

Deswegen heißen die justify- oder align-Werte auch flex-start / flex-end und nicht flex-left oder flex-right.

Das Grid erbt diese Terminologie. Eine grid-direction gibt es allerdings nicht, die Hauptachse verläuft in Leserichtung. In einer „westeuropäischen“ Anordnung also von links nach rechts. Die Querachse verläuft in Zeilenrichtung, von oben nach unten. Das ändert sich bei Einsatz der CSS Eigenschaften direction und writing-mode, aber dafür bin ich kein Experte.

Die CSS Eigenschaften justify-content und align-items wurden für Flexbox geschaffen und deshalb heißen zwei Werte flex-start und flex-end. Mit der Einführung von Grid wurde die Anwendbarkeit der Eigenschaften erweitert, und die neuen Werte start und end eingeführt. Diese gelten für Flexbox und Grid, und für weitere Elemente, die einmal diese Eigenschaften verwenden können sollen. Das ist beim W3C in Arbeit.

Die Varianten start und end werden zumindest von Chromium Browsern für Flexbox nicht akzeptiert, für Grid aber schon. flex-start/flex-end werden, aus Kompatibilitätsgründen, für beides akzeptiert. Der Firefox verwendet start/end und flex-start/flex-end bei Flexbox und Grid synonym. Das ist die wunderbare Welt der living standards und der Rückwärtskompatibilität.

Rolf