Własność CSS justify-self

Własność CSS justify-self określa sposób wyrównania elementu względem osi głównej kontenera flex albo osi śródliniowej kontenera 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 poziomie.

Wartości i składnia

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

auto

Powoduje użycie ustawienia własności justify-items elementu nadrzędnego. Jeśli brak elementu nadrzędnego albo element jest pozycjonowany absolutnie, zachowuje się jak normal.

normal

Domyślne wyrównanie elementów, tak jakby własność justify-self nie była ustawiona. Jej działanie jest zależne od typu układu.

• CSS Grid: działa tak samo, jak stretch, czyli w większości przypadków rozciąga elementy na całą dostępną przestrzeń. Jeśli element ma określony współczynnik kształtu albo rozmiar wewnętrzny, wartość ta zachowuje się tak samo, jak start.
• CSS Flexbox i tabele HTML: jest ignorowane.
• Układy blokowe i pozycjonowania absolutnego: działa tak samo, jak start.

center

Wyrównanie elementu do środka osi, względem której jest wyrównywany (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementu do środka w poziomie), np.:

div {
  justify-self: center;
}

Efekt:

start

Wyrównanie elementu w kontenerze do początku osi głównej lub śródliniowej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do lewej krawędzi kontenera), np.:

div {
  justify-self: start;
}

Przykładowy efekt:

end

Wyrównanie elementu w kontenerze do końca osi głównej lub śródliniowej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do prawej krawędzi kontenera).

flex-start

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

flex-end

Wyrównanie jednostki flex w kontenerze flex do końca jego osi głównej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementu do prawej krawędzi kontenera). Ta wartość odnosi się tylko do jednostek flex. Jeśli zostanie zastosowana do elementu, który nie jest jednostką flex, to zostanie potraktowana jako end.

left

Wyrównanie do lewej krawędzi logicznej lub fizycznej elementu.

right

Wyrównanie do prawej krawędzi logicznej lub fizycznej elementu.

stretch

Rozciągnięcie elementu w kontenerze na całą dostępną przestrzeń wzdłuż odpowiedniej osi. W kontenerach flex wartość ta działa jak flex-start lub start, ponieważ w układzie CSS Flexbox o rozciąganiu elementów decyduje ustawienie własności flex-grow.

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