justify-self

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

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

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

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

Значение по умолчанию auto
Наследуется Нет
Применяется К блочным элементам, абсолютно позиционированным элементам, грид-элементам
Анимируется Нет

Синтаксис

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
Выравнивает по правому краю контейнера.

Песочница

1
2
3
div {
  display: grid;
}
.item {
  justify-self: normal;
}

Пример

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>justify-self</title>
  <style>
   header {
    background-color: #29695b; /* Цвет фона */
    padding: 0.5rem; /* Расстояние от текст до края */
    font-family: Arial, Helvetica, sans-serif; /* Семейство шрифта */
    margin-bottom: 1rem; /* Расстояние снизу */
   }
   .logo {
    color: #b3d052; /* Цвет текста */
    font-size: 1.5rem; /* Размер заголовка */
    font-weight: bold; /* Жирное начертание */
    justify-self: center; /* Логотип по центру */
    margin-bottom: 1rem; /* Расстояние снизу */
   }
   nav ul {
    display: flex; /* Выстраиваем по горизонтали */
    list-style: none; /* Убираем маркеры */
    margin: 0; padding: 0; /* Убираем отступы в списке */
    justify-self: center; /* Меню по центру */
   }
   nav a {
    color: #ff632a; /* Цвет ссылок */
    text-decoration: none; /* Убираем подчёркивание */
    padding: 1rem; /* Расстояние от текста до края */
   }
  </style>
 </head>
 <body>
  <header>
   <div class="logo">XPRESSO</div>
   <nav>
    <ul>
     <li><a href="#">Меню</a></li>
     <li><a href="#">Адреса</a></li>
     <li><a href="#">Доставка</a></li>
    </ul>
   </nav>
  </header>
 </body>
</html>

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

Объект.style.justifySelf

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

Браузеры

16 57 44 10.1 45
57 45 43 10.3

См. также