Ostatnie wyrównanie do wartości bazowej

Wszystkie główne wyszukiwarki obsługują teraz ostatnie wyrównanie bazowe w siatce CSS i flexbox.

Rachel Andrew

Wyrównanie za pomocą słów kluczowych first i last jest teraz dostępne we wszystkich głównych wyszukiwarkach. Oznacza to, że podczas wyrównywania grup elementów elastycznych lub siatki możemy użyć ostatniego wyrównania bazowego jako innej opcji.

Pierwsze wyrównanie punktu odniesienia

Jeśli ustawisz wartość align-items na baseline, wynik będzie pierwszym wyrównaniem do punktu odniesienia. Dlatego pierwszy punkt odniesienia dla wyrównywanego elementu (opisany jako obiekt wyrównywania) będzie zgodny z pierwszym punktem odniesienia dla innych elementów w grupie. Widać to w przykładzie poniżej. Pierwsze 2 elementy elastyczne są wyrównane za pomocą atrybutu align-items: baseline, aby wyrównać się wzdłuż linii bazowej utworzonej przez większy tekst. Ostatni element jest wyrównywany z wartością flex-start i dlatego jest wyrównywany z początkiem kontenera elastycznego.

Ostatnie wyrównanie punktu odniesienia

Gdy wyrównujesz siatkę lub element elastyczny do wartości last baseline, ostatni punkt odniesienia dla tego elementu zostanie wyrównany do ostatniej punktu odniesienia w grupie udostępniania bazowej, do której należy. Przykład poniżej pokazuje ostatnie wyrównanie punktu odniesienia – pierwszy element elastyczny jest wyrównany do ostatniego wiersza tekstu w większym elemencie. Ostatni element w tej grupie jest wyrównany do elementu flex-end, który jest końcem kontenera elastycznego.

Wyrównanie awaryjne

Jeśli obiekt wyrównania nie ma bazowej grupy udostępniania, do której można dopasować, zostanie użyte wyrównanie zastępcze. W przypadku elementów baseline i first baseline wyrównanie kreacji zastępczej ma wartość start, a w przypadku last baseline wyrównanie kreacji zastępczej ma wartość end.