Ta justify-items
wł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-items
wyró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
, center
i end
) lub z zachowania (np auto
lub stretch
).
Gdy justify-items
jest używany, ustawia również justify-self
wartość domyślną dla wszystkich elementów siatki, chociaż można to zastąpić na poziomie podrzędnym, używając justify-self
wł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 siatkiauto
: taka sama jak wartośćjustify-items
w rodzicu.normal
: Chociaż widzimy, że jestjustify-items
używany najczęściej w układzie siatki, technicznie jest używany do dowolnego wyrównania ramki inormal
oznacza 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
)
- układy na poziomie bloków (
.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 baseline
tosafe start
. - Wyrównanie rezerwowe dla
last baseline
tosafe end
. baseline
odpowiada,first baseline
gdy 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ównaniaend
: Wyrównuje elementy z pojemnikiem wyrównania krawędzi końcowejcenter
: Wyrównuje elementy do środka pojemnika wyrównanialeft
: Wyrównuje elementy po lewej stronie kontenera wyrównaniaright
: Wyrównuje elementy po prawej stronie kontenera wyrównaniaself-start
: Wyrównuje elementy na początku każdej komórki elementu siatkiself-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ć safe
wartoś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,start
uż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 (npright
,left
lubcenter
), że kluczowe jest przekazywany potomstwu dziedziczyć. Ale jeśli potomek zadeklaruje,justify-self: auto;
tolegacy
jest 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 obliczanormal
.
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-items
dział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-items
tak 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+ |
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+ |
Powiązane właściwości
Almanach 27 października 2019 ralign-items
Geoff Graham