Justify-items - CSS-Tricks

Anonim

Ta justify-itemswłaściwość jest właściwością podrzędną modułu CSS Box Alignment Module, który zasadniczo kontroluje wyrównanie elementów siatki w ich zakresie.

.element ( justify-items: center; )

justify-itemswyrównuje elementy siatki wzdłuż osi wiersza (w wierszu). Specyficznie, ta właściwość pozwala ustawić wyrównanie dla elementów wewnątrz kontenera siatki (nie sama siatka) w określonej pozycji (np start, centeri end) lub z zachowania (np autolub stretch).

Gdy justify-itemsjest używany, ustawia również justify-selfwartość domyślną dla wszystkich elementów siatki, chociaż można to zastąpić na poziomie podrzędnym, używając justify-selfwłaściwości samego elementu podrzędnego.

.grid ( display: grid; justify-items: center; ) .grid-item ( justify-self: start; )

Składnia

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Wartość początkowa: legacy
  • Dotyczy: wszystkich elementów
  • Odziedziczone: nie
  • Wartość obliczona: jak określono
  • Typ animacji: dyskretna

Wartości

/* Basic keyword values */ justify-items: auto; justify-items: normal; justify-items: stretch; /* Baseline alignment */ justify-items: baseline; justify-items: first baseline; justify-items: last baseline; /* Positional alignment */ justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; /* Overflow alignment */ /* Used as an optional second value for positional alignment */ justify-items: safe; justify-items: unsafe; /* Legacy */ justify-items: legacy center; justify-items: legacy left; justify-items: legacy right; /* Global values */ justify-items: inherit; justify-items: initial; justify-items: unset;

Podstawowe wartości słów kluczowych

  • stretch: Wartość domyślna. Wyrównuje elementy tak, aby wypełniały całą szerokość komórki elementu siatki
  • auto: taka sama jak wartość justify-itemsw rodzicu.
  • normal: Chociaż widzimy, że jest justify-itemsużywany najczęściej w układzie siatki, technicznie jest używany do dowolnego wyrównania ramki i normaloznacza różne rzeczy w różnych kontekstach układu, w tym:
    • układy na poziomie bloków ( start)
    • układy siatki stretch
    • flexbox (ignorowane)
    • komórki tabeli (ignorowane)
    • układy pozycjonowane bezwzględnie ( start)
    • pola pozycjonowane absolutnie ( stretch)
    • zastąpił pola pozycjonowane absolutnie ( start)
.container ( justify-items: stretch; )

Wartości wyrównania linii bazowej

Spowoduje to wyrównanie linii bazowej wyrównania pierwszego lub ostatniego zestawu linii bazowych ramki z odpowiednią linią bazową kontekstu wyrównania.

.container ( justify-items: baseline; )
  • Wyrównanie rezerwowe dla first baselineto safe start.
  • Wyrównanie rezerwowe dla last baselineto safe end.
  • baselineodpowiada, first baselinegdy jest używany samodzielnie

W poniższym demo (najlepiej oglądanym w przeglądarce Firefox) widzimy, jak elementy są wyrównane z linią bazową siatki opartej na głównej osi.

Pozycyjne wartości wyrównania

  • start: Wyrównuje elementy do początkowej krawędzi pojemnika wyrównania
  • end: Wyrównuje elementy z pojemnikiem wyrównania krawędzi końcowej
  • center: Wyrównuje elementy do środka pojemnika wyrównania
  • left: Wyrównuje elementy po lewej stronie kontenera wyrównania
  • right: Wyrównuje elementy po prawej stronie kontenera wyrównania
  • self-start: Wyrównuje elementy na początku każdej komórki elementu siatki
  • self-end: Wyrównuje elementy na końcu każdej komórki elementu siatki
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Wartości wyrównania przepełnienia

Właściwość przepełnienia określa sposób wyświetlania zawartości siatki, gdy zawartość przekracza granice siatki. Więc gdy zawartość jest większa niż kontener wyrównania, spowoduje to przepełnienie, które może prowadzić do utraty danych. Aby temu zapobiec, możemy użyć safewartości, która nakazuje przeglądarce zmianę wyrównania, aby nie doszło do utraty danych.

  • safe : Jeśli element przepełnia kontener wyrównania, startużywany jest tryb.
  • unsafe : Wartość wyrównania jest zachowywana bez zmian, niezależnie od rozmiaru przedmiotu lub pojemnika wyrównania.

Starsze wartości

  • legacy : W przypadku korzystania z kierunkowym słowa kluczowego (np right, leftlub center), że kluczowe jest przekazywany potomstwu dziedziczyć. Ale jeśli potomek zadeklaruje, justify-self: auto;to legacyjest ignorowany, ale nadal przestrzega słowa kluczowego directional. Wartość jest obliczana na wartość dziedziczoną, jeśli nie zostanie podane słowo kluczowe directional. W przeciwnym razie oblicza normal.

Próbny

Więcej informacji

  • Moduł wyrównywania skrzynek CSS poziom 3 (wersja robocza)
  • Kompletny przewodnik po sieci
  • Kompletny przewodnik po Flexbox

Wsparcie przeglądarki

Obsługa przeglądarki justify-itemsdziała w pewnym zakresie, ponieważ jest używana w wielu kontekstach układu, takich jak siatka, flexbox, komórki tabeli. Ale ogólnie, jeśli obsługiwane są grid i flexbox, możesz założyć, że justify-itemstak też jest.

Układ siatki

TO ZNACZY Brzeg Firefox Chrom Safari Opera
Nie 16+ 45+ 57+ 10.1+ 44+
Android Chrome Android Firefox Przeglądarka Android iOS Safari Opera Mobile
81+ 45+ 81+ 10.1+ 59+
Źródło: caniuse

Układ elastyczny

TO ZNACZY Brzeg Firefox Chrom Safari Opera
Nie 12+ 20+ 52+ 9+ 12.1+
Android Chrome Android Firefox Przeglądarka Android iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12.1+
Źródło: caniuse

Powiązane właściwości

Almanach 27 października 2019 r

align-items

Geoff Graham