Атрибут justify-items
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Атрибут CSS justify-items
определяет атрибут по умолчанию justify-self
для всех элементов блока, предоставляя всем им способ выравнивания по умолчанию каждого блока вдоль соответствующей оси.
Интерактивный пример
Эффект этого атрибута зависит от выбранного способа разметки:
- Используя разметку с помощью блоков (block-level layout), элементы выравниваются внутри содержащего их блока по внутренней оси.
- Для абсолютно позиционированых элементов выравнивание происходит внутри содержащего их блока по внутренней оси, учитывая значения смещения сверху, слева, снизу и справа.
- Используя разметку с помощью ячеек таблицы (table cell layout), этот атрибут игнорируется (подробнее о выравнивании в блочной структуре, абсолютном позиционировании и о табличной разметке).
- Используя разметку с помощью гибких или адаптивных блоков (flexbox layout), этот атрибут игнорируется (подробнее о выравнивании в разметке flexbox).
- Используя разметку с помощью сетки (grid layout), элементы выравниваются внутри их сеточной области по внутренней оси (подробнее о выравнивании в разметке grid).
Синтаксис
/* Ключевые слова */
justify-items: auto;
justify-items: normal;
justify-items: stretch;
/* Выравнивание положения */
justify-items: center; /* Выровнять элементы по центру */
justify-items: start; /* Выровнять элементы в начале */
justify-items: end; /* Выровнять элементы в конце */
justify-items: flex-start; /* Эквивалентно 'start'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. */
justify-items: flex-end; /* Эквивалентно 'end'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. */
justify-items: self-start;
justify-items: self-end;
justify-items: left; /* Выровнять элементы по левому краю */
justify-items: right; /* Выровнять элементы по правому краю */
/* Исходное выравнивание */
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;
/* Выравнивание при переполнении (только для выравнивания положения) */
justify-items: safe center;
justify-items: unsafe center;
/* Унаследованное выравнивание */
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;
/* Глобальные значения */
justify-items: inherit;
justify-items: initial;
justify-items: unset;
Этот атрибут может принимать одну из четырёх различных форм:
- Основные ключевые слова: одно из значений ключевого слова:
normal
,auto
, илиstretch
. - Исходное выравнивание: ключевое слово
baseline
плюс одно ключевое слово по выбору:first
илиlast
. - Выравнивание положения: одно из ключевых слов:
center
,start
,end
,flex-start
,flex-end
,self-start
,self-end
,left
, илиright
. Плюс ключевое слово по выбору:safe
илиunsafe
. - Унаследованное выравнивание: ключевое слово
legacy
, за которым следует ключевое словоleft
илиright
.
Значения
auto
-
Используемое значение является значением атрибута
justify-items
родительского блока. Если у блока нет родительского элемента или он абсолютно спозиционирован, то в этих случаях значениеauto
представляет собой значениеnormal
. normal
-
Эффект этого атрибута зависит от выбранного способа разметки:
- Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова
start
- Для разметки с абсолютно позиционированный элементами, это ключевое слово ведёт себя как
start
на заменённых блоках с абсолютным позиционированием и какstretch
на всех остальных блоках с абсолютным позиционированием - Используя разметку с помощью ячеек таблицы (table cell layout), это ключевое слово не имеет значения, так как этот атрибут игнорируется
- Используя разметку с помощью гибких блоков (flexbox layout), это ключевое слово не имеет значения, так как этот атрибут игнорируется
- Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению
stretch
, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведёт себя какstart
- Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова
start
-
Элемент выравнивается на одном уровне друг с другом по направлению к начальной границе контейнера выравнивания по соответствующей оси.
end
-
Элемент выравнивается на одном уровне друг с другом по направлению к конечной границе контейнера выравнивания по соответствующей оси.
flex-start
-
Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как
start
. flex-end
-
Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как
end
. self-start
-
Элемент выравнивается на одном уровне с границей контейнера выравнивания начальной стороны элемента по соответствующей оси.
self-end
-
Элемент выравнивается на одном уровне с границей контейнера выравнивания конечной стороны элемента по соответствующей оси.
center
-
Элементы выравниваются на одном уровне друг с другом по направлению к центру контейнера выравнивания.
left
-
Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведёт себя как
start
. right
-
Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведёт себя как
start
. baseline first baseline
last baseline
-
Определяет участие значений
first baseline
илиlast baseline
в исходном выравнивании. Значениеbaseline
выравнивает первый или последний блок набора в соответствии с исходным выравниванием в общем первом или последнем наборе всех блоков в его совместной группе исходного выравнивания.Возвратным выравниванием дляfirst baseline
является значениеstart
, дляlast baseline
является значениеend
. stretch
-
Если объединённый размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением
auto
увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемыеmax-height
/max-width
(или эквивалентной функциональностью), таким образом, что объединённый размер точно заполняет контейнер выравнивания. safe
-
Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания имел значение
start
. unsafe
-
Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.
legacy
-
Создаёт значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение
justify-self: auto
, ключевое словоlegacy
не учитывается по нисходящему наследованию. Действует только со значениемleft
,right
, илиcenter
, связанным с ним.
Формальный синтаксис
justify-items =
normal |
stretch |
<baseline-position> |
<overflow-position>? [ <self-position> | left | right ] |
legacy |
legacy && [ left | right | center ] |
anchor-center
<baseline-position> =
[ first | last ]? &&
baseline
<overflow-position> =
unsafe |
safe
<self-position> =
center |
start |
end |
self-start |
self-end |
flex-start |
flex-end
Спецификации
Specification |
---|
CSS Box Alignment Module Level 3 # justify-items-property |
Начальное значение | legacy |
---|---|
Применяется к | все элементы |
Наследуется | нет |
Обработка значения | как указано |
Animation type | discrete |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- CSS Руководство по Grid: Выравнивание блоков в разметке Grid
- CSS Выравнивание блоков
- Сокращённый атрибут
place-items
- Атрибут
justify-self
- Атрибут
align-items