Własność CSS justify-items

Własność CSS justify-items określa domyślny sposób wyrównania wszystkich elementów w kontenerze, np. względem osi głównej kontenera flex albo osi śródliniowej kontenera CSS Grid używany przez własność justify-self. 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-items przyjmuje następujące wartości:

normal

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

• Układ 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.
• Układ CSS Flexbox i Tabele HTML: jest ignorowane.
• Układy blokowe i pozycjonowania absolutnego: działa tak samo, jak start.

center

Wyrównanie elementów 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-items: center;
}

start

Wyrównanie elementów 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;
}

end

Wyrównanie elementów 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 jednostek 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 jednostek 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 elementów w kontenerze na całą dostępną przestrzeń wzdłuż odpowiedniej osi.

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.

legacy

Powoduje, że wartość zostaje odziedziczona przez elementy podrzędne. To słowo powinno być używane w parze ze słowem: left, right lub center.

Podsumowanie