АтрибутCSSjustify-items определяет атрибут по умолчаниюjustify-self для всех элементов блока, предоставляя всем им способ выравнивания по умолчанию каждого блока вдоль соответствующей оси.

Интерактивный пример

justify-items: stretch;

justify-items: center;

justify-items: start;

justify-items: end;

<section>  <div>    <div>      <div>One</div>      <div>Two</div>      <div>Three</div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  grid-template-columns: 1fr 1fr;  grid-auto-rows: 40px;  grid-gap: 10px;  width: 220px;}#example-element > div {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;}

Эффект этого атрибута зависит от выбранного способа разметки:

• Используя разметку с помощью блоков (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

start

Элемент выравнивается на одном уровне друг с другом по направлению к начальной границе контейнера выравнивания по соответствующей оси.

end

Элемент выравнивается на одном уровне друг с другом по направлению к конечной границе контейнера выравнивания по соответствующей оси.

flex-start

Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается какstart.

flex-end

Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается какend.

self-start

Элемент выравнивается на одном уровне с границей контейнера выравнивания начальной стороны элемента по соответствующей оси.

self-end

Элемент выравнивается на одном уровне с границей контейнера выравнивания конечной стороны элемента по соответствующей оси.

center

Элементы выравниваются на одном уровне друг с другом по направлению к центру контейнера выравнивания.

left

Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведёт себя какstart.

right

Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведёт себя какstart.

baseline first baselinelast 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

Спецификации

Совместимость с браузерами

Смотрите также

• CSS Руководство по Grid:Выравнивание блоков в разметке Grid
• CSS Выравнивание блоков
• Сокращённый атрибутplace-items
• Атрибутjustify-self
• Атрибутalign-items