place-items

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

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

Интерактивный пример

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

Это свойство является сокращением для следующих CSS-свойств:

Синтаксис

css
/* Ключевые слова */
place-items: center;
place-items: normal start;

/* Позиционное выравнивание */
place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;
place-items: left legacy;
place-items: right normal;

/* Выравнивание по базовой линии */
place-items: baseline normal;
place-items: first baseline legacy;
place-items: last baseline normal;
place-items: stretch legacy;

/* Глобальные значения */
place-items: inherit;
place-items: initial;
place-items: revert;
place-items: unset;

Значения

Записывается одним из двух способов:

  • Одно значение align-items, которое используется для определения выравнивания как колонки, так и ряда.
  • Значение align-items, определяющее выравнивание колонки, после которого следует значение justify-items, задающее выравнивание для ряда.

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

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется квсе элементы
Наследуетсянет
Обработка значениякак и у каждого из подсвойств этого свойства:
Animation typediscrete

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

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

<align-items> =
normal |
stretch |
<baseline-position> |
[ <overflow-position>? <self-position> ] |
anchor-center

<justify-items> =
normal |
stretch |
<baseline-position> |
<overflow-position>? [ <self-position> | left | right ] |
legacy |
legacy && [ left | right | center ] |
anchor-center

<baseline-position> =
[ first | last ]? &&
baseline

<overflow-position> =
unsafe |
safe

<self-position> =
center |
start |
end |
self-start |
self-end |
flex-start |
flex-end

Примеры

Выравнивание элементов во флекс-контейнере

Для флекс-раскладки свойства justify-self или justify-items не применяются, поскольку элементы размещаются по главной оси, поэтому второе значение будет проигнорировано.

CSS

css
#container {
  height: 200px;
  width: 240px;
  place-items: stretch; /* В выпадающем списке ниже можно изменить это значение */
  background-color: #8c8c8c;
  display: flex;
}

Результат

Выравнивание элементов в грид-контейнере

В следующем грид-контейнере есть элементы, которые меньше грид-области, в которой они находятся, поэтому place-items будет выравнивать их по оси колонки и оси ряда.

CSS

css
#gridcontainer {
  height: 200px;
  width: 240px;
  place-items: stretch; /* В выпадающем списке ниже можно изменить это значение */
  background-color: #8c8c8c;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#gridcontainer > div {
  width: 50px;
}

Результат

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

Specification
CSS Box Alignment Module Level 3
# place-items-property

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
place-items
anchor-center
Experimental
Supported in Flex Layout
Supported in Grid Layout

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

Смотрите также