Свойство CSS justify-self

Определение и использование

Свойство justify-self выравнивает элементы сетки в направлении строки внутри их ячеек сетки.

Для английских страниц направление строки составляет слева направо, а направление блока — вниз.

Чтобы это свойство имело какое-либо выравнивающее действие, элемент сетки должен оставлять доступное пространство вокруг себя в направлении строки.

Совет:Чтобы выровнять элементы сетки в направлении блока вместо направления строки, используйте Свойство align-self Или Свойство align-items Свойства.

См. также:

Учебник CSS:CSS Grid

Учебник CSS:CSS positioning

Руководство по CSS:Свойство align-content

Руководство по CSS:Свойство align-items

Руководство по CSS:Свойство align-self

Руководство по CSS:Свойство direction

Руководство по CSS:Свойство grid

Руководство по CSS:Свойство grid-template-columns

Руководство по CSS:Свойство position

Руководство по CSS:Свойство writing-mode

См. также:

Пример

Пример 1

Выровняйте элемент сетки справа от его ячейки сетки:

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

Попробуйте сами

Пример 2: сравнение justify-self и justify-items

Установите способ выравнивания по отношению к контейнеру в 'середина', а сам элемент сетки в 'правый'. Значение свойства 'right' имеет приоритет:

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

Попробуйте сами

Пример 3: Установка justify-self на элементе сетки с абсолютным позиционированием

Установите способ выравнивания абсолютного позиционирования элемента сетки в 'right':

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

Попробуйте сами

Пример 4: writing-mode

Когда значение свойства writing-mode элемента сетки устанавливается в vertical-rl, направление строки внутри составляет вниз. Результатом является то, что точка начала контейнера смещается влево к верху, а точка конца контейнера смещается вправо к низу:

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

Попробуйте сами

Пример 5: direction

Когда значение атрибута direction элемента контейнера сетки установлено в 'rtl', направление направленного ряда составляет справа налево. Результатом является то, что начальная точка контейнера перемещается с левого края вправо, а конечная точка контейнера перемещается с правого края влево:

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

Попробуйте сами

CSS синтаксис

justify-self: auto|normal|stretch|позиционное выравнивание|overflow-alignment|базовая выравничная линия|initial|inherit;

Значение атрибута

Значение Описание
auto Значение по умолчанию. Наследует значение атрибута justify-self контейнера сетки.
normal

Зависит от контекста布局а, но подобно 'stretch', если не установлено значение size, для элементов сетки в сеточном макете.

Если установлено значение size, то поведение значения атрибута подобно 'start'.
stretch Если не установлено inline-size (ширина), то растягивается, чтобы заполнить ячейку сетки.
start Выравнивает элементы в начале направленного ряда.
left Выравнивает элементы по левому краю.
center Выравнивает элементы по центру.
end Выравнивает элементы в конце направленного ряда.
right Выравнивает элементы по правому краю.
overflow-alignment
  • 'safe' устанавливает способ выравнивания элемента в 'start', если контент выходит за пределы.
  • 'unsafe' сохраняет значение выравнивания, независимо от того, выходит ли контент за пределы.
базовая выравничная линия Элементы выравниваются по базовой линии с родительским элементом.
initial Установить этот атрибут в его значение по умолчанию. См. также: initial.
inherit Этот атрибут наследуется от родительского элемента. См. также: inherit.

Технические детали

Значение по умолчанию: auto
Инheritance: нет
Создание анимации: Не поддерживается. См. также:Свойства анимации.
Версия: CSS3
JavaScript синтаксис: object.style.justifySelf="right"

Поддержка браузеров

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

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