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

CSS свойства

Определение и применение

CSS свойство justify-self производит выравнивание элемента макета сетки внутри ячейки по оси строки grid-контенера. Для того, чтобы произвести выравнивание элемента макета сетки внутри ячейки по оси столбца grid-контенера вы можете воспользоваться свойством align-selfcss3.

Свойство justify-self переопределяет значение выравнивания, заданного для grid-контейнера свойством justify-items конкретному элементу.


В настоящее время если элемент не является элементом сетки макета (не находится внутри родительского элемента, который является блочным, или строчным grid-контейнером), то свойство justify-self не окажет на такой элемент никакого эффекта.


Обращаю Ваше внимание, что если для элемента установлено свойство margin(внешние отступы) со значением auto, то свойство justify-self будет игнорировано.

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

Схематичное отображение работы свойства justify-self

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
justify-self 54.0*52.044.010.310.0*
-ms-
16.0
12.0
-ms-

CSS синтаксис:

justify-self: "auto | stretch | center | start | end | baseline | initial | inherit";

JavaScript синтаксис:

object.style.justifySelf = "auto"

Значения свойства

ЗначениеОписание
autoЭлемент наследует значение его родительского контейнера. Если родительский контейнер не имеет значения, то значение, устанавливается, как stretch. Это значение по умолчанию.
stretchЭлемент растягивается по размеру столбца ячейки контейнера.
centerЭлемент располагается по центру столбца ячейки контейнера.
startЭлемент располагается по начальному краю ячейки.
endЭлемент располагается по конечному краю ячейки.
baselineЭлемент распологается по его базовой линии.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS Box Alignment Module Level 3 Working Draft

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства justify-self (для grid-контейнера).</title>
<style>
.grid-container {
    display: grid; /* элемент отображается как блочный grid-контейнер */
    grid: auto / repeat(5, 1fr);   /* определяем количество и ширину строк и столбцов в макете сетки */
    grid-gap: 10px; /* определяем расстояние (промежуток) между строками и столбцами в макете сетки */
    height: 100px; /* устанавливаем высоту контейнера */
    background: rgb(0,150,208); /* устанавливаем цвет заднего фона */
    justify-items: center; /* элементы располагаются по центру столбца */
    text-align: center; /* выравниваем элементы горизонтально по центру */
}
.grid-container div { /* используем селектор дочерних элементов (форматируем все элементы <div>, вложенные внутрь флекс контейнера  ) */
    border: 1px solid; /* устанавливаем сплошную границу размером 1 пиксель */
    background: rgb(241,101,41);  /* устанавливаем цвет заднего фона */
} 
.grid-container div:nth-of-type(1) { /* выбираем каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем первый <div> в контейнере) */ 
    justify-self: auto;  /* элемент наследует значение его родительского контейнера (center) */
} 
.grid-container div:nth-of-type(2) { /* выбираем каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем второй <div> в контейнере) */ 
    justify-self: stretch;  /* элемент растягивается по размеру столбца ячейки контейнера */
} 
.grid-container div:nth-of-type(3) { /* выбираем каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем третий <div> в контейнере) */ 
    justify-self: start;  /* элемент располагается в начале столбца ячейки контейнера */
} 
.grid-container div:nth-of-type(4) { /* выбираем каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем четвертый <div> в контейнере) */ 
    justify-self: end;  /* элемент располагается в конце стобца ячейки контейнера */
} 
.grid-container div:nth-of-type(5) { /* выбираем каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем пятый <div> в контейнере) */ 
    justify-self: baseline;  /* элемент распологается по его базовой линии */
} 
</style>
</head>
	<body>
		<div class = "grid-container">
			<div>auto(наследует center)</div>
			<div>stretch</div>
			<div>start</div>
			<div>end</div>
			<div>baseline</div>
		</div>
	</body>
</html>

В этом примере мы разместили блочный grid-контейнер, внутри которого мы разместили пять элементов <div> и установили для него следующие значения:

С использованием псевдокласса :nth-of-type()css3 указали для каждого элемента свое значение свойства justify-self:

Результат примера:

Пример использования свойства justify-self (для grid-контейнера).
Пример использования свойства justify-self (для grid-контейнера).
CSS свойства