Свойство justify-self

Описание

Устанавливает способ выравнивания элемента внутри его контейнера вдоль inline оси.

Синтаксис

justify-self: legacy | start | end | flex-start | flex-end | center | left | right | baseline / first baseline / last baseline | space-between | space-around | space-evenly | stretch | safe | unsafe;

Подробности

Значение	Описание
legacy	Создает значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение justify-self: auto, унаследованное ключевое слово не учитывается по нисходящему, только left, right или значением center, связанным с ним.
start	Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси.
end	Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси.
flex-start	Флексы прижаты к началу строки.
flex-end	Флексы прижаты к концу строки.
center	Флексы прижимаются по центру строки.
left	Элементы упакованы вплотную друг к другу к левому краю контейнера выравнивания. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start.
right	Элементы упакованы вплотную друг с другом по направлению к правому краю контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start.
baseline, first baseline, last baseline	Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии. Обратно-совместимое выравнивание для first baseline - start, а для last baseline - end.
space-between	Флексы равномерно распределяются по всей строке. Первый и последний флекс прижимаются к соответствующим краям контейнера.
space-around	Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.
space-evenly	Элементы равномерно распределены внутри контейнера выравнивания вдоль главной оси. Интервал между каждой парой смежных элементов, краем основного начала и первым элементом, краем основного конца и последним элементом абсолютно одинаков.
stretch	Если объединенный размер элементов меньше, чем размер контейнера выравнивания, размер любого элемента авторазмера увеличивается одинаково (не пропорционально), при этом соблюдая ограничения, накладываемые max-height / max-width (или эквивалентными функциями), так что объединенный размер точно заполняет контейнер выравнивания вдоль главной оси.
safe	Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания был start.
unsafe	Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div class='grid-4'>
 <div class='grid-4-col bg-green'>1</div>
 <div class='grid-4-col grid-4-col-center bg-red'>2</div>
 <div class='grid-4-col bg-green'>3</div>
 </div>
 <style>
 .grid-4 {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-gap: 10px;
 }
 .grid-4-col {
 padding: 1rem;
 }
 .grid-4-col-center {
 justify-self: center;
 }
 .bg-green {
 background-color: rgb(3, 95, 9);
 }
 .bg-red {
 background-color: rgb(152, 20, 20);
 }
 </style>
</body>
</html>

Описание

Синтаксис

Подробности

Пример

Читайте также

Свойство z-index

Свойство border-right

Стиль для переключателей в неопределённом состоянии

Функция repeating-linear-gradient()