Własność CSS align-items

Własność CSS align-items określa wyrównanie wszystkich jednostek flex lub jednostek grid na osi poprzecznej (w przypadku układu CSS Flexbox) lub blokowej (w przypadku układu CSS Grid).

Jest to własność logiczna, czyli zależna od kierunku i orientacji tekstu, więc w uproszczeniu można powiedzieć, że w standardowych dokumentach w języku polskim określa ona wyrównanie elementów w pionie.

Na przykład w przypadku układu CSS Flexbox własność ta określa rozmieszczenie jednostek flex na osi poprzecznej kontenera flex w bieżącym rzędzie.

Wartości i składnia

Własność align-items przyjmuje następujące wartości:

normal

Domyślne wyrównanie elementów, tak jakby własność align-content nie była ustawiona. Działa tak samo, jak stretch, czyli rozciąga elementy na całą dostępną przestrzeń, jeśli nie mają one rozmiaru ustalonego przez inną własność.

Wyjątek stanowią elementy o określonym współczynniku kształtu i mające wymiary wewnętrzne, w których przypadku wartość ta działa jak start.

center

Wyrównanie elementów w kontenerze do środka osi poprzecznej, blokowej lub kolumnowej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do środka w pionie).

start

Wyrównanie elementów w kontenerze do początku osi poprzecznej, blokowej lub kolumnowej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do górnej krawędzi kontenera).

end

Wyrównanie elementów w kontenerze do końca osi poprzecznej, blokowej lub kolumnowej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do dolnej krawędzi kontenera).

flex-start

Wyrównanie jednostek flex w kontenerze flex do początku jego osi poprzecznej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do górnej krawędzi kontenera). Ta wartość odnosi się do kontenerów flex. Jeśli zostanie zastosowana do elementu, który nie jest dzieckiem kontenera flex, to zostanie potraktowana jako start.

flex-end

Wyrównanie jednostek flex w kontenerze flex do końca jego osi poprzecznej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do dolej krawędzi kontenera). Ta własność odnosi się do kontenerów flex. Jeśli zostanie zastosowana do elementu, który nie jest dzieckiem kontenera flex, to zostanie potraktowana jako end.

baseline

Synonim wartości first baseline

first baseline

Wyrównanie do pierwszej linii bazowej

last baseline

Wyrównanie do ostatniej linii bazowej

self-start

Wyrównanie elementów do krawędzi początkowej kontenera względem odpowiedniej osi.

self-end

Wyrównanie elementów do krawędzi końcowej kontenera względem odpowiedniej osi.

stretch

Rozciągnięcie elementów w kontenerze na całą dostępną przestrzeń wzdłuż osi poprzecznej, blokowej lub kolumnowej.

safe

Jest to modyfikator, który można stosować z każdym z poprzednich słów kluczowych. Oznacza, że jeśli wybrane ustawienie powoduje wyjście treści poza kontener, przez co część danych może być niewidoczna, to zostanie zastosowane wyrównanie start.

unsafe

Odwrotność modyfikatora safe. Ustawienie zostanie zastosowane niezależnie od tego, czy może doprowadzić do utraty danych przez wyjście treści poza kontener, czy nie.

Podsumowanie