justify-self

Эффект этого свойства зависит от режима макета:

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

/* Basic keywords */
justify-self: auto;
justify-self: normal;
justify-self: stretch;

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

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

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

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

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

• Основные ключевые слова: одно из ключевых значений normal, auto, или stretch.

• Выравнивание по базовой линии: ключевое слово baseline и, необязательно, одно из first или last.

• Позиционное выравнивание:

  • одно из: center, start, end, flex-start, flex-end, self-start, self-end, left, или right.
  • И, необязательно, safe или unsafe.

auto

Используемое значение — значение свойства justify-items родительского блока, если у блока нет родителя или он имеет абсолютное позиционирование, в этих случаях auto представляет normal.

normal

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

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

start

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

end

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

flex-start

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

flex-end

Для элементов, которые не являются потомками контейнера flex, это значение обрабатывается как 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

Независимо от относительных размеров элемента и контейнера выравнивания, заданное значение выравнивания поддерживается.

justify-self = 
  auto                                                |
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  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 — по умолчанию — что приводит к растягиванию элементов сетки по всей ширине ячеек.

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

HTML

<article class="container">
  <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;
}

span:nth-child(2) {
  justify-self: start;
}

span:nth-child(3) {
  justify-self: center;
}

span:nth-child(4) {
  justify-self: end;
}

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

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

Результат

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