Atrybut CSS justify-items

Definicja i użycie

Atrybut justify-items jest ustawiany na kontenerze siatki, aby elementy potomne (elementy siatki) były wyrównywane w kierunku wewnętrznym.

Dla stron angielskich, kierunek wewnętrzny to z lewej na prawo, a kierunek blokowy to w dół.

Aby ten atrybut miał jakikolwiek efekt wyrównania, element siatki musi mieć dostępne przestrzeń wokół siebie w kierunku wewnętrznym.

Wskazówka:Aby wyrównać elementy siatki w kierunku blokowym zamiast wewnętrznym, użyj Atrybut align-items Atrybuty.

Zobacz również:

CSS kurs:CSS Grid

CSS kurs:CSS pozycjonowanie

CSS podręcznik:Atrybut align-items

CSS podręcznik:Atrybut direction

CSS podręcznik:Atrybut grid

CSS podręcznik:Atrybut grid-template-columns

CSS podręcznik:Atrybut justify-self

CSS podręcznik:Atrybut position

CSS podręcznik:Atrybut writing-mode

Przykład

Przykład 1

Wyścignij każdy element siatki na końcu jego komórki w kierunku wewnętrznym:

#container {
  display: grid;
  justify-items: end;
}

Spróbuj sam

Przykład 2: Porównanie justify-items z justify-self

Ustawienie metody wyrównania względem kontenera na „środek”, a metoda wyrównania samego elementu na „w prawo”. Wartość atrybutu 'right' ma pierwszeństwo:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

Spróbuj sam

Przykład 3: Ustawienie justify-items na elemencie siatki z absolutnym ustawieniem

Ustawienie metody wyrównania elementu siatki z absolutnym ustawieniem na „w prawo”:

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

Spróbuj sam

Przykład 4: writing-mode

Kiedy wartość atrybutu writing-mode elementu kontenera siatki ustawiona jest na vertical-rl, kierunek wewnętrzny jest w dół. W rezultacie punkt początkowy kontenera przenosi się z lewej strony na górę, a punkt końcowy z prawej strony na dół:

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

Spróbuj sam

Przykład 5: direction

Kiedy wartość atrybutu direction elementu kontenera siatki jest ustawiona na 'rtl', kierunek wiersza jest z prawej do lewej. W rezultacie punkt początkowy kontenera przenosi się z lewej strony na prawą, a punkt końcowy z prawej strony na lewą:

#container {
  justify-items: start;
  direction: rtl;
}

Spróbuj sam

Gramatyka CSS

justify-items: legacy|normal|stretch|positionowa-alignment|overflow-alignment|bazowa-alignment|initial|inherit;

Wartość atrybutu

Wartość Opis
legacy

Domyślna wartość.

Tylko w przypadku wartości justify-self na 'auto' w elementach siatki, które zaczynają się od 'legacy', wartość justify-items jest dziedziczona od właściwości justify-items kontenera siatki.

Jego istnienie ma na celu realizację ustawień wyrówniania, które były obecne w elemencie HTML <center> i atrybucie align.
normal Zależy od kontekstu układu, ale jest podobne do 'stretch' w układzie siatki.
stretch Jeśli nie ustawiono inline-size (szerokość), rozciąga się, aby wypełnić komórkę siatki.
start Wyrównuje projekty na początku kierunku wiersza.
left Wyrównuje projekty do lewej strony.
center Wyrównuje projekty do środka.
end Wyrównuje projekty na końcu kierunku wiersza.
right Wyrównuje projekty do prawej strony.
overflow-alignment
  • 'safe' ustawia sposób wyrówniania projektów na 'start', jeśli zawartość wypływa.
  • 'unsafe' zachowuje wartości wyrówniania, niezależnie od tego, czy zawartość projektów wypływa.
bazowa-alignment Elementy są wyrównywane do bazy elementu nadrzędnego.
initial Ustawia tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Przekazuje tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: legacy
Inherencja: nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
Gramatyka JavaScript: object.style.justifyItems="center"

Wsparcie przeglądarki

Liczby w tabeli wskazują na wersję przeglądarki, która po raz pierwszy w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0