Atrybut CSS justify-items
- poprzednia strona justify-content
- Następna strona justify-self
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; }
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; }
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; }
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; }
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; }
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 |
|
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 |
- poprzednia strona justify-content
- Następna strona justify-self