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 ⁨январь 2020 г.⁩.

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

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

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

place-items: center stretch;

place-items: center start;

place-items: start end;

place-items: end center;

<section>  <div>    <div>      <div>One</div>      <div>Two</div>      <div>Three</div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  grid-template-columns: 1fr 1fr;  grid-auto-rows: 80px;  grid-gap: 10px;  width: 220px;}#example-element > div {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;}

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

Это свойство является сокращением для следующих 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, задающее выравнивание для ряда.

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

Начальное значение	как и у каждого из подсвойств этого свойства: `align-items`:`normal` `justify-items`:`legacy`
Применяется к	все элементы
Наследуется	нет
Обработка значения	как и у каждого из подсвойств этого свойства: `align-items`: как указано `justify-items`: как указано
Animation type	discrete

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

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 не применяются, поскольку элементы размещаются по главной оси, поэтому второе значение будет проигнорировано.

div > div {  box-sizing: border-box;  border: 2px solid #8c8c8c;  width: 50px;  display: flex;  align-items: center;  justify-content: center;}#item1 {  background-color: #8cffa0;  min-height: 30px;  font-size: 2em;}#item2 {  background-color: #a0c8ff;  min-height: 50px;}#item3 {  background-color: #ffa08c;  min-height: 40px;}#item4 {  background-color: #ffff8c;  min-height: 60px;}#item5 {  background-color: #ff8cff;  min-height: 70px;}#item6 {  background-color: #8cffff;  min-height: 50px;}select {  font-size: 16px;}.row {  margin-top: 10px;}

<div>  <div>1</div>  <div>2</div>  <div>3</div></div><div>  <label for="values">place-items: </label>  <select>    <option value="stretch">stretch</option>    <option value="start">start</option>    <option value="center">center</option>    <option value="end">end</option>    <option value="left">left</option>    <option value="right">right</option>    <option value="auto center">auto center</option>    <option value="normal start">normal start</option>    <option value="center normal">center normal</option>    <option value="start auto">start auto</option>    <option value="end normal">end normal</option>    <option value="self-start auto">self-start auto</option>    <option value="self-end normal">self-end normal</option>    <option value="flex-start auto">flex-start auto</option>    <option value="flex-end normal">flex-end normal</option>    <option value="left auto">left auto</option>    <option value="right normal">right normal</option>    <option value="baseline normal">baseline normal</option>    <option value="first baseline auto">first baseline auto</option>    <option value="last baseline normal">last baseline normal</option>    <option value="stretch auto">stretch auto</option>  </select></div>

let values = document.getElementById("values");let container = document.getElementById("container");values.addEventListener("change", function (evt) {  container.style.placeItems = evt.target.value;});

CSS

css

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

Результат

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

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

div > div {  box-sizing: border-box;  border: 2px solid #8c8c8c;}#item1 {  background-color: #8cffa0;  min-height: 30px;  font-size: 2em;}#item2 {  background-color: #a0c8ff;  min-height: 50px;}#item3 {  background-color: #ffa08c;  min-height: 40px;}#item4 {  background-color: #ffff8c;  min-height: 60px;}#item5 {  background-color: #ff8cff;  min-height: 70px;}#item6 {  background-color: #8cffff;  min-height: 50px;}select {  font-size: 16px;}.row {  margin-top: 10px;}

<div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div></div><div>  <label for="gridvalues">place-items: </label>  <select>    <option value="stretch">stretch</option>    <option value="start">start</option>    <option value="center">center</option>    <option value="end">end</option>    <option value="left">left</option>    <option value="right">right</option>    <option value="auto center">auto center</option>    <option value="normal start">normal start</option>    <option value="center normal">center normal</option>    <option value="start auto">start auto</option>    <option value="end normal">end normal</option>    <option value="self-start auto">self-start auto</option>    <option value="self-end normal">self-end normal</option>    <option value="flex-start auto">flex-start auto</option>    <option value="flex-end normal">flex-end normal</option>    <option value="left auto">left auto</option>    <option value="right normal">right normal</option>    <option value="baseline normal">baseline normal</option>    <option value="first baseline auto">first baseline auto</option>    <option value="last baseline normal">last baseline normal</option>    <option value="stretch auto">stretch auto</option>  </select></div>

let values = document.getElementById("gridvalues");let container = document.getElementById("gridcontainer");values.addEventListener("change", function (evt) {  container.style.placeItems = evt.target.value;});

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;}