Атрибут justify-items

Синтаксис

Атрибут 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
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, связанным с ним.

Формальный синтаксис

normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]
где 
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

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

Спецификация Статус Комментарий
CSS Box Alignment Module Level 3
Определение 'justify-items' в этой спецификации.		 Рабочий черновик Первоначальное определение
Начальное значениеlegacy
Применяется квсе элементы
Наследуетсянет
Обработка значениякак указано
Animation typediscrete

Поддержка браузерами

Поддержка в разметке Flex

Поддержка в разметке Grid

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