Места размещения - CSS-хитрости

place-itemsСвойство в CSS является обсчитывать для align-itemsи justify-itemsсвойств, объединяя их в единую декларацию.

Обычно используется горизонтальное и вертикальное центрирование с помощью сетки:

.center-inside-of-me ( display: grid; place-items: center; )

Эти свойства стали использоваться с появлением макетов Flexbox и Grid, но также применяются к:

Блочные ящики
Абсолютно расположенные боксы
Статическое положение абсолютно позиционированных боксов
Ячейки таблицы

Синтаксис

Свойство принимает двойные значения: первое для align-itemsи второе для justify-items. В качестве напоминания align-itemsвыравнивает содержимое по вертикальной оси (столбец), а justify-itemsпо горизонтальной (строка) оси.

.item ( display: grid; place-items: start center; )

Это то же самое, что писать:

.item ( display: grid; align-items: start; justify-items: center; )

Если указано только одно значение, оно устанавливает оба свойства. Например, это:

.item ( display: grid; place-items: start; )

… Это то же самое, что написать это:

.item ( display: grid; align-items: start; justify-items: start; )

Принятые значения

Что делает это свойство интересным, так это то, что оно ведет себя по-разному в зависимости от контекста, в котором оно используется. Например, некоторые значения применимы только к Flexbox и не будут работать в настройках сетки. Кроме того, одни значения применяются к align-itemsсвойству, другие - к justify-itemsстороне.

Кроме того, сами значения можно рассматривать как подпадающие под ряд типов выравнивания: контекстное, распределительное, позиционное (которое становится самопозиционным, если непосредственно применяется к дочернему элементу в макете) и базовое.

У Рэйчел Эндрю есть отличная шпаргалка по выравниванию ящиков, которая помогает проиллюстрировать влияние значений.

Ценить	Тип	Описание
`auto`	Контекстуальный	Значение корректируется соответствующим образом в зависимости от контекста элемента. Он использует `justify-items`значение родительского элемента элемента. Если родительский элемент не существует или он применяется к элементу, который позиционируется с `absolute`, значение становится `normal`.
`normal`	Контекстуальный	Принимает поведение по умолчанию контекста макета, в котором он применяется. • Макеты на уровне блоков: `start` • Абсолютное позиционирование: `start`для замененных абсолютных элементов и `stretch`для всех остальных • Макеты таблиц: значение игнорируется • Макеты Flexbox: значение игнорируется • Макеты сетки: `stretch`если только соотношение сторон или внутреннее изменение размеров не используются там, где они работают подобно`start`
`stretch`	Распределение	Расширяет элемент до обоих краев контейнера по вертикали для `align-items`и по горизонтали для `justify-items`.
`start`	Позиционный	Все элементы выровнены друг относительно друга по начальному (левому) краю контейнера.
`end`	Позиционный	Все элементы выровнены друг относительно друга на конечном (правом) крае контейнера.
`center`	Позиционный	Элементы выравниваются рядом друг с другом по направлению к центру контейнера.
`left`	Позиционный	Элементы выровнены рядом друг с другом по левой стороне контейнера. Если свойство не параллельно стандартной верхней, правой, нижней и левой оси, то оно ведет себя как `end`.
`right`	Позиционный	Элементы выровнены рядом друг с другом по правой стороне контейнера. Если свойство не параллельно стандартной верхней, правой, нижней, левой оси, то оно ведет себя как `start`.
`flex-start`	Позиционный	Значение только для флексбокса (которое возвращается `start`), когда элементы упаковываются ближе к начальному краю контейнера.
`flex-end`	Позиционный	Значение только для флексбокса (которое возвращается `end`), когда элементы упаковываются ближе к конечному краю контейнера.
`self-start`	Самостоятельная позиция	Позволяет элементу в макете выравниваться по краю контейнера на основе его собственной начальной стороны. В основном переопределяет заданное значение для родительского элемента.
`self-end`	Самостоятельная позиция	Позволяет элементу в макете выравниваться по краю контейнера на основе его собственной конечной стороны вместо наследования позиционного значения контейнера. В основном переопределяет заданное значение для родительского элемента.
`first baseline` `last baseline`	Исходный уровень	Выравнивает все элементы в группе (т.е. ячейки в строке) путем сопоставления их базовых линий выравнивания. По умолчанию `first`if `baseline`используется сам по себе.