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

place-self — CSS-сокращённое свойство, которое позволяет одновременно выравнивать отдельный элемент по блочной и строчной осям (то есть задаёт свойства align-self и justify-self). Это свойство применяется к блочным контейнерам, абсолютно позиционированным контейнерам и элементам сетки. Если второе значение не указано, для него также используется первое значение.

Попробуйте

place-self: stretch center;

place-self: center start;

place-self: start end;

place-self: end center;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  width: 220px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

• align-self
• justify-self

Синтаксис

/* Positional alignment */
place-self: auto center;
place-self: normal start;
place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;
place-self: anchor-center;

/* Baseline alignment */
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;

/* Global values */
place-self: inherit;
place-self: initial;
place-self: revert;
place-self: revert-layer;
place-self: unset;

Значения

Для этого свойства задаётся одно или два из следующих ключевых значений:

auto

Вычисляется в значение свойства align-items родительского элемента.

normal

Эффект этого ключевого слова зависит от используемого режима компоновки:

• В абсолютно позиционированных компоновках ключевое слово действует как start для замещаемых абсолютно позиционированных контейнеров и как stretch для всех остальных абсолютно позиционированных контейнеров.
• В статической позиции абсолютно позиционированных компоновок ключевое слово действует как stretch.
• Для flex-элементов ключевое слово действует как stretch.
• Для элементов сетки это ключевое слово приводит к поведению, аналогичному stretch, за исключением контейнеров с соотношением сторон или внутренним размером, для которых оно действует как start.
• Свойство не применяется к блочным контейнерам и ячейкам таблиц.

self-start

Выравнивает элементы так, чтобы они примыкали к краю контейнера выравнивания, соответствующему начальной стороне элемента по поперечной оси.

self-end

Выравнивает элементы так, чтобы они примыкали к краю контейнера выравнивания, соответствующему конечной стороне элемента по поперечной оси.

flex-start

Край поперечного начального поля flex-элемента примыкает к начальному краю поперечной оси строки.

flex-end

Край поперечного конечного поля flex-элемента примыкает к конечному краю поперечной оси строки.

center

Поле flex-элемента центрируется внутри строки по поперечной оси. Если поперечный размер элемента больше размера flex-контейнера, он будет выходить за его пределы в обе стороны на одинаковое расстояние.

baseline, first baseline. last baseline

Задаёт участие в выравнивании по первой или последней базовой линии: выравнивает базовую линию первого или последнего набора базовых линий контейнера с соответствующей базовой линией в общем первом или последнем наборе базовых линий всех контейнеров в группе совместного использования базовых линий. Резервным выравниванием для first baseline является start, а для last baseline — end.

stretch

Если суммарный размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, а размер элемента задан как auto, его размер увеличивается равномерно (не пропорционально) с учётом ограничений, заданных свойствами max-height/max-width (или эквивалентными средствами), так что суммарный размер всех элементов с размером auto точно заполняет контейнер выравнивания вдоль поперечной оси.

anchor-center

Для элементов, позиционируемых относительно якоря, выравнивает элемент по центру связанного якорного элемента в блочном и строчном направлениях. См. раздел «Центрирование относительно якоря с помощью anchor-center».

Формальное определение

Формальный синтаксис

place-self = 
  <'align-self'> <'justify-self'>?

Примеры

Базовый пример

В следующем примере используется сетка размером 2 x 2. Изначально для контейнера сетки заданы значения justify-items и align-items stretch — значения по умолчанию, из-за которых элементы сетки растягиваются на всю ширину своих ячеек.

Для второго, третьего и четвёртого элементов сетки затем задаются разные значения place-self, чтобы показать, как они переопределяют размещение по умолчанию. Эти значения приводят к тому, что элементы сетки занимают только ширину и высоту своего содержимого и выравниваются в разных позициях внутри своих ячеек по блочному и строчному направлениям.

HTML

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
  <span>Fourth</span>
</article>

CSS

html {
  font-family: "Helvetica", "Arial", sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
}

span:nth-child(2) {
  place-self: start center;
}

span:nth-child(3) {
  place-self: center start;
}

span:nth-child(4) {
  place-self: end;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

Результат

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

Совместимость с браузерами

См. также

• align-self
• justify-self
• Основные понятия flexbox
• Выравнивание элементов во flex-контейнере
• Выравнивание блоков в сеточной компоновке
• Модуль выравнивания блоков CSS