Свойство CSS `justify-items`

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

Попробуйте

justify-items: stretch;

justify-items: center;

justify-items: start;

justify-items: end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <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: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Действие этого свойства зависит от используемого режима компоновки:

• При блочной компоновке оно выравнивает элементы внутри содержащего их блока вдоль строчной оси.
• Для абсолютно позиционированных элементов оно выравнивает элементы внутри содержащего их блока вдоль строчной оси с учётом значений смещения top, left, bottom и right.
• При компоновке ячеек таблицы это свойство игнорируется (см. Выравнивание блоков, абсолютно позиционированных элементов и таблиц).
• При компоновке flexbox это свойство игнорируется (см. Выравнивание во flexbox).
• При компоновке grid оно выравнивает элементы внутри их областей сетки вдоль строчной оси (см. Выравнивание при компоновке 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 left;
justify-items: legacy right;
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 или center.

Значения

normal

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

• При блочной компоновке ключевое слово является синонимом start.
• При абсолютно позиционированной компоновке ключевое слово действует как start для замещающих абсолютно позиционированных блоков и как stretch для всех остальных абсолютно позиционированных блоков.
• При компоновке ячеек таблицы это ключевое слово не имеет значения, так как свойство игнорируется.
• При компоновке flexbox это ключевое слово не имеет значения, так как свойство игнорируется.
• При компоновке grid это ключевое слово приводит к поведению, аналогичному 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 — start, а для last baseline — end.

stretch

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

anchor-center

Для элементов, позиционируемых относительно якоря, выравнивает элементы по центру связанного элемента-якоря в строчном направлении. См. Выравнивание по центру якоря с помощью 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

Примеры

Базовый пример

В этом примере используется сетка размером 2 × 2. Изначально для контейнера сетки задано значение 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 — сокращённая запись
• Выравнивание при компоновке grid
• Модуль выравнивания блоков CSS