Letzte Referenzausrichtung

Alle gängigen Browser-Engines unterstützen jetzt die letzte Referenzausrichtung im CSS-Raster und in der Flexbox.

Rachel Andrew

Die Ausrichtung mit den Keywords first und last ist jetzt in allen wichtigen Suchmaschinen verfügbar. Das bedeutet, dass wir die letzte Baseline-Ausrichtung als weitere Option verwenden können, wenn Sie Gruppen von Flex- oder Rasterelementen ausrichten.

Erste Referenzausrichtung

Wenn Sie den Wert von align-items auf baseline festlegen, ist das Ergebnis die erste Referenzausrichtung. Daher entspricht die erste Baseline des Elements, das Sie ausrichten (Ausrichtungsthema), mit der ersten Baseline der anderen Elemente in der Gruppe. Im folgenden Beispiel werden die ersten beiden flexiblen Elemente mithilfe von align-items: baseline entsprechend der Referenz ausgerichtet, die durch den größeren Text erstellt wurde. Das letzte Element ist an flex-start und daher am Anfang des Flex-Containers ausgerichtet.

Letzte Referenzausrichtung

Wenn Sie ein Raster- oder flexibles Element am Wert last baseline ausrichten, wird die letzte Baseline des Elements an der letzten Baseline der Baseline-Freigabegruppe ausgerichtet, zu der es gehört. Das folgende Beispiel zeigt die letzte Basisausrichtung, wobei das erste flexible Element an der letzten Textzeile im größeren Element ausgerichtet wird. Das letzte Element in dieser Gruppe ist an flex-end ausgerichtet. Das ist das Ende des Flex-Containers.

Fallback-Ausrichtung

Wenn das Ausrichtungsobjekt keine gemeinsame Basisgruppe zur Ausrichtung hat, wird eine Fallback-Ausrichtung verwendet. Für baseline und first baseline ist die Fallback-Ausrichtung start und für last baseline ist end die Fallback-Ausrichtung.