justify-items

Результат действия свойства зависит от режима макета:

• В блочных макетах выравнивание элементов происходит по оси inline внутри их родительского блока.
• Для абсолютно позиционированных элементов выравнивание элементов происходит по оси inline внутри их родительского блока, учитывая смещения, заданные свойствами top, left, bottom и right.
• В макетах таблиц это свойство игнорируется (подробнее о выравнивании в блочных, абсолютно позиционированных и табличных макетах)
• В макетах Flexbox это свойство игнорируется (подробнее о выравнивании в макетах Flexbox)
• В макетах Grid выравнивание элементов происходит по оси inline внутри их областей сетки (подробнее о выравнивании в макетах Grid)

/* Basic keywords */
justify-items: normal;
justify-items: stretch;

/* Positional alignment */
justify-items: center; /* Pack items around the center */
justify-items: start; /* Pack items from the start */
justify-items: end; /* Pack items from the end */
justify-items: flex-start; /* Equivalent to 'start'. Note that justify-items is ignored in flexbox layouts. */
justify-items: flex-end; /* Equivalent to 'end'. Note that justify-items is ignored in flexbox layouts. */
justify-items: self-start;
justify-items: self-end;
justify-items: left; /* Pack items from the left */
justify-items: right; /* Pack items from the right */
justify-items: anchor-center;

/* Baseline alignment */
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

/* Overflow alignment (for positional alignment only) */
justify-items: safe center;
justify-items: unsafe center;

/* Legacy alignment */
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

/* Global values */
justify-items: inherit;
justify-items: initial;
justify-items: revert;
justify-items: revert-layer;
justify-items: unset;

Это свойство может принимать одну из четырёх форм:

• Ключевые слова: одно из ключевых слов normal или stretch.
• Выравнивание по базовой линии: ключевое слово baseline, и опционально одно из first или last.
• Позиционное выравнивание: одно из center, start, end, flex-start, flex-end, self-start, self-end, left, или right. Опционально safe или unsafe.
• Устаревшее выравнивание: ключевое слово legacy и одно из left или right.

normal

Действие этого ключевого слова зависит от режима макета:

• В блочных макетах оно является синонимом start.
• В абсолютно позиционированных макетах оно ведёт себя как start для замещающих абсолютно позиционированных блоков и как stretch для всех остальных абсолютно позиционированных блоков.
• В макетах таблиц это ключевое слово не имеет значения, так как свойство игнорируется.
• В макетах Flexbox это ключевое слово не имеет значения, так как свойство игнорируется.
• В макетах Grid это ключевое слово приводит к поведению, аналогичному stretch, за исключением элементов с соотношением сторон или заданными внутренними размерами, где оно ведет себя как start.

start

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

end

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

flex-start

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

flex-end

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

self-start

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

self-end

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

center

Элементы выравниваются по центру области выравнивания.

left

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

right

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

baseline, first baseline, last baseline

Участвует в выравнивании по первой или последней базовой линии: выравнивает базовую линию первого или последнего набора базовых линий элемента с соответствующей базовой линией в общем первом или последнем наборе базовых линий всех элементов в группе совместного использования базовых линий. Значение по умолчанию для first baseline - start, для last baseline - end.

stretch

Если общий размер элементов меньше размера контейнера выравнивания, любые элементы с размером auto увеличивают свой размер равномерно (а не пропорционально), но при этом учитывая ограничения max-height/max-width (или аналогичную функциональность), чтобы общий размер точно заполнил контейнер выравнивания.

anchor-center

В случае элементов с привязкой выравнивает элементы по центру связанного якоря по оси inline. См. Выравнивание по центру якоря с помощью anchor-center.

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    

В следующем примере представлен простой макет сетки 2x2. Изначально контейнеру сетки задано значение justify-items stretch (значение по умолчанию), что приводит к растягиванию элементов сетки на всю ширину ячеек.

При наведении или нажатии клавиши Tab на контейнер сетки ему задается значение justify-items center, что приводит к тому, что элементы сетки занимают только ширину своего содержимого и выравниваются по центру своих ячеек.

HTML

<article class="container" tabindex="0">
  <span>First child</span>
  <span>Second child</span>
  <span>Third child</span>
  <span>Fourth child</span>
</article>

CSS

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
  justify-items: stretch;
}

article:hover,
article:focus {
  justify-items: center;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

Результат

• justify-self
• align-items
• place-items сокращение
• Выравнивание блоков в сетках CSS
• Модуль CSS выравнивания блоков