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, jakstretch
, 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
Zastosowanie | Jednostki flex, jednostki grid, elementy pozycjonowane absolutnie |
---|---|
Obsługiwane wartości | Słowa kluczowe flex-start , flex-end , center , self-start , self-end , stretch , start , end , baseline , first baseline , last baseline , safe , unsafe |
Wartość początkowa | normal |
Dziedziczenie | Nie |
Specyfikacja CSS | CSS Box Alignment Module Level 3, align-self |