Atrybut CSS justify-self

Definicja i użycie

Atrybut justify-self wyrównuje elementy siatki wewnątrz komórki siatki w kierunku wewnętrznym.

Dla stron angielskich, kierunek wewnętrzny wynosi od lewej do prawej, a kierunek blokowy jest w dół.

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

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

Zobacz również:

Kurs CSS:CSS Grid

Kurs CSS:CSS Lokalizacja

Podręcznik CSS:Atrybut align-content

Podręcznik CSS:Atrybut align-items

Podręcznik CSS:Atrybut align-self

Podręcznik CSS:Atrybut direction

Podręcznik CSS:Atrybut grid

Podręcznik CSS:Atrybut grid-template-columns

Podręcznik CSS:Atrybut position

Podręcznik CSS:Atrybut writing-mode

Zobacz również:

Przykład

Przykład 1

Wyrównanie elementu siatki po prawej stronie jego komórki siatki:

.red {
  display: grid;
  justify-self: right;
}

Spróbuj sam

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

Ustawienie sposobu wyrównania względem kontenera na 'środek', a element siatki 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-self na elemencie siatki z absolutną lokalizacją

Ustawienie sposobu wyrównania elementu siatki z absolutną lokalizacją na 'right':

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

Spróbuj sam

Przykład 4: writing-mode

Gdy wartość atrybutu writing-mode elementu kontenera siatki ustawiona jest na vertical-rl, kierunek wewnętrzny wynosi w dół. W rezultacie punkt początkowy kontenera przenosi się do góry, a punkt końcowy do dołu:

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

Spróbuj sam

Przykład 5: direction

Kiedy wartość atrybutu direction elementu kontenera siatki ustawiona jest na 'rtl', kierunek wewnętrzny to od 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 {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

Spróbuj sam

Gramatyka CSS

justify-self: auto|normal|stretch|wyrównanie pozycyjne|wyrównanie-przepływ|Wyrównanie bazy|initial|inherit;

Wartość atrybutu

Wartość Opis
auto Domyślna wartość. Inherencja wartości właściwości justify-self kontenera siatki.
normal

Zależy od kontekstu układu, ale jest podobne do 'stretch' elementu siatki w układzie siatki, gdy nie ustawiono size.

Jeśli ustawiono size, zachowanie wartości atrybutu jest podobne do 'start'.
stretch Jeśli nie ustawiono inline-size (szerokość), rozciąga się, aby wypełnić komórkę siatki.
start Wyrównuje projekt na początku kierunku wewnętrznego.
left Wyrównuje projekt do lewej strony.
center Wyrównuje projekt do środka.
end Wyrównuje projekt na końcu kierunku wewnętrznego.
right Wyrównuje projekt do prawej strony.
wyrównanie-przepływ
  • 'safe' ustawia sposób wyrównania projektu na 'start', jeśli zawartość przepływa.
  • 'unsafe' zachowuje wartość wyrównania, niezależnie od tego, czy zawartość projektu przepływa.
Wyrównanie bazy Elementy są wyrównywane do bazy z elementem nadrzędnym.
initial Ustawienie tej właściwości na jej wartość domyślną. Zobacz: initial.
inherit Inherencja tej właściwości od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: auto
Inherencja: nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty związane z animacją.
Wersja: CSS3
Język JavaScript: object.style.justifySelf="right"

Obsługa przeglądarek

Liczby w tabeli wskazują na wersję przeglądarki, która 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