Własność CSS align-self

> Dodaj do ulubionych

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

Jest to własność 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 elementu w pionie.

Na przykład w przypadku układu CSS Flexbox własność ta określa położenie jednostki flex na osi poprzecznej kontenera flex.

Wartości i składnia

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

normal
Domyślne wyrównanie elementu, tak jakby własność align-content nie była ustawiona. Działa tak samo, jak stretch, czyli rozciąga element na całą dostępną przestrzeń, jeśli nie ma on 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 elementu w kontenerze do środka osi poprzecznej, blokowej lub kolumnowej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementu do środka w pionie).
start
Wyrównanie elementu w kontenerze do początku osi poprzecznej, blokowej lub kolumnowej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementu do górnej krawędzi kontenera).
end
Wyrównanie elementu w kontenerze do końca osi poprzecznej, blokowej lub kolumnowej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementu do dolnej krawędzi kontenera).
flex-start
Wyrównanie jednostki flex w kontenerze flex do początku jego osi poprzecznej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementu 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 jednostki flex w kontenerze flex do końca jego osi poprzecznej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementu do dolej 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 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 elementu do krawędzi początkowej kontenera względem odpowiedniej osi.
self-end
Wyrównanie elementu do krawędzi końcowej kontenera względem odpowiedniej osi.
stretch
Rozciągnięcie elementu 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

ZastosowanieJednostki flex, jednostki grid, elementy pozycjonowane absolutnie
Obsługiwane wartościSłowa kluczowe flex-start, flex-end, center, self-start, self-end, stretch, start, end, baseline, first baseline, last baseline, safe, unsafe
Wartość początkowanormal
DziedziczenieNie
Specyfikacja CSSCSS Box Alignment Module Level 3, align-self
Jajko z dzwonkiem

Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.