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

CSS свойства

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

CSS свойство place-self производит выравнивание элемента макета сетки внутри ячейки по оси столбца и по оси строки grid-контенера. Является сокращенным свойством для свойств align-self и justify-self.

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


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


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

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

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

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

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

CSS синтаксис:

// с указанием двух значений
place-self: "align-self | justify-self";

// с указанием одного значения
place-self: "align-self";  // Если указано одно значение, то justify-self = align-self

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

JavaScript синтаксис:

object.style.justifySelf = "auto"

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

ЗначениеОписание
align-selfЗадает выравнивание отдельных элементов строки внутри флекс контейнера, или производит выравнивание элемента макета сетки внутри ячейки по оси столбца grid-контейнера. Возможные значения:
  • auto - элемент наследует значение его родительского контейнера. Если родительский контейнер не имеет значения, то значение, устанавливается, как stretch. Это значение по умолчанию.
  • stretch - элемент растягивается по размеру строки контейнера вдоль поперечной оси.
  • center - элемент располагается по центру строки контейнера.
  • start - элемент располагается в начале строки контейнера.
  • end - элемент располагается в конце строки контейнера.
  • baseline - элемент распологается по его базовой линии строки контейнера.
justify-selfПроизводит выравнивание элемента макета сетки внутри ячейки по оси строки grid-контенера. Возможные значения:
  • auto - элемент наследует значение его родительского контейнера. Если родительский контейнер не имеет значения, то значение, устанавливается, как stretch. Это значение по умолчанию.
  • stretch - элемент растягивается по размеру столбца контейнера.
  • center - элемент располагается по центру столбца контейнера.
  • start - элемент располагается по начальному краю ячейки.
  • end - элемент располагается по конечному краю ячейки.
  • baseline - элемент распологается по его базовой линии.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS Box Alignment Module Level 3 Working Draft

Наследуется

Нет.

Анимируемое

Нет.

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

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

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

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

Для второго контейнера указали для каждого элемента следующие значения свойства place-self:

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

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