Атрибут CSS justify-items

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

Свойство justify-items устанавливается на контейнере сетки, чтобы элементы-дочери (элементы сетки) выравнивались в направлении строки внутри.

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

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

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

См. также:

CSS учебник:CSS Grid

CSS учебник:CSS позиционирование

CSS справочник:Свойство align-items

CSS справочник:Свойство direction

CSS справочник:Свойство grid

CSS справочник:Свойство grid-template-columns

CSS справочник:Свойство justify-self

CSS справочник:Свойство position

CSS справочник:Свойство writing-mode

Пример

Пример 1

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

#container {
  display: grid;
  justify-items: end;
}

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

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

Установите способ выравнивания относительно контейнера в «центрированный», а сетевой элемент сам в «правый край». Значение атрибута 'right' имеет приоритет:

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

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

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

Установите способ выравнивания элемента сетки с абсолютной позицией в «правый край»:

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

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

Пример 4: writing-mode

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

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

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

Пример 5: direction

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

#container {
  justify-items: start;
  direction: rtl;
}

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

CSS синтаксис

justify-items: legacy|normal|stretch|positional alignment|overflow-alignment|baseline alignment|initial|inherit;

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

Значение Описание
legacy

Значение по умолчанию.

Только когда значение justify-self начинается с 'legacy', сетевые элементы с значением 'auto' наследуют атрибут justify-items сетевого контейнера.

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

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

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

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

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

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