Атрибут CSS justify-items
- предыдущая страница justify-content
- Следующая страница justify-self
Определение и использование
Свойство 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 |
|
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 |
- предыдущая страница justify-content
- Следующая страница justify-self