Alle gängigen Browser-Engines unterstützen jetzt die letzte Referenzausrichtung im CSS-Raster und in der Flexbox.
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.
Unterstützte Browser
- 108
- 108
- 52
- 16,2
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.
Teil der Videoreihe „Neu interoperable“