justify-self

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

Результат использования свойства justify-self зависит от режима вёрстки.

• Блочная вёрстка. justify-self выравнивает элемент внутри содержащего его блока вдоль строчной оси.
• Абсолютное позиционирование. Для абсолютно позиционированных элементов justify-self выравнивает элемент внутри содержащего его блока по строчной оси, учитывая смещения сверху, снизу, слева и справа.
• Грид-элементы. В грид-вёрстке justify-self выравнивает элемент внутри его области вдоль строчной оси.
• Ячейки таблицы, флекс-элементы. Для ячеек таблиц и флекс-элементов свойство justify-self не даёт никакого эффекта и применяться к ним не должно.

Краткая информация

Синтаксис

justify-self: 
auto | normal | stretch | 
<baseline-position> | 
<overflow-position>?
[ <self-position> | left | right ]

Значения

auto

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

normal

Эффект зависит от режима вёрстки, в котором находится элемент.

• Блочная вёрстка. Значение normal является синонимом start.
• Абсолютное позиционирование. Значение normal ведёт себя как stretch.
• Грид-вёрстка. Значение normal ведёт себя как stretch.

stretch

Растягивает элемент до размеров его контейнера.

<baseline-position> = [ first | last ]? && baseline

baseline

Вычисляет как значение first baseline.

first baseline

Выравнивает по первой базовой линии.

last baseline

Выравнивает по последней базовой линии.

<overflow-position> = unsafe | safe

unsafe

Элемент выравнивается, независимо от размеров элемента и контейнера.

safe

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

<self-position> = center | start | end | self-start | self-end

center

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

start

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

end

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

self-start

Элемент выравнивается в начале соответствующей оси с учётом направления письма (слева направо или справа налево).

self-end

Элемент выравнивается в конце соответствующей оси с учётом направления письма (слева направо или справа налево).

left

Выравнивает по левому краю контейнера.

right

Выравнивает по правому краю контейнера.

div {
  display: grid;
}
.item {
  justify-self: {{ playgroundValue }};
}

Пример

Объектная модель

Объект.style.justifySelf

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

• CSS Box Alignment Module Level 3

Браузеры