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 |