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

Свойство justify-self в CSS задаёт способ выравнивания блока внутри контейнера выравнивания по соответствующей оси.

Попробуйте

justify-self: stretch;

justify-self: center;

justify-self: start;

justify-self: end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  width: 220px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

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

• В блочных макетах оно выравнивает элемент внутри содержащего блока по строчной оси.
• Для абсолютно позиционированных элементов оно выравнивает элемент внутри содержащего блока по строчной оси с учётом значений смещения top, left, bottom и right.
• В макетах с ячейками таблицы это свойство игнорируется. Подробнее о выравнивании в блочном, абсолютно позиционированном и табличном макетах.
• В макетах Flexbox это свойство игнорируется. Подробнее о выравнивании во Flexbox.
• В макетах Grid оно выравнивает элемент внутри области сетки по строчной оси. Подробнее о выравнивании в макетах 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

Элементы располагаются вплотную друг к другу у левого края контейнера выравнивания. Если ось свойства не параллельна строчной оси, это значение ведёт себя как 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

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

Формальное определение

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

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

Примеры

Основной пример

В следующем примере используется сетка размером 2 × 2. Изначально для контейнера сетки задано значение 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;
}

Результат

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

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

См. также

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