Свойство CSS place-items
Свойство place-items — сокращение для align-items и justify-items в CSS. Значения свойства и примеры.
CSS-свойство place-items — это сокращение, которое задаёт два свойства выравнивания одновременно:
- align-items — выравнивание по блочной оси (в стандартном макете — вертикальное направление, по столбцам).
- justify-items — выравнивание по строчной оси (в стандартном макете — горизонтальное направление, по строкам).
Вместо того чтобы писать оба свойства, достаточно одного объявления place-items. Это особенно удобно в макетах Grid: свойство управляет тем, как каждый элемент располагается внутри собственной ячейки сетки (значения выравнивания применяются ко всем элементам, что эквивалентно заданию place-self для каждого из них).
На этой странице описаны синтаксис, форма с одним и двумя значениями, все доступные значения с пояснением их действия, а также макеты, в которых place-items не имеет эффекта.
Когда применяется place-items?
place-items работает только в тех макетах, которые оперируют понятием «элементы»:
- CSS Grid-макеты — основной сценарий использования. Выравнивает каждый элемент внутри его области сетки.
- Абсолютно позиционированные блоки — выравнивает блок внутри содержащего его блока.
Свойство игнорируется в следующих случаях, что является распространённым источником путаницы:
- Flexbox-макеты —
justify-items(а значит, и строчная половинаplace-items) не работает в Flexbox. Используйте вместо этого justify-content иalign-itemsнапрямую. - Стандартные блочные элементы.
- Ячейки таблиц.
Поведение place-items зависит от контекста макета — одно и то же значение может означать разное в CSS Grid и при абсолютном позиционировании. Таблица значений ниже поясняет каждый случай.
| Начальное значение | normal legacy |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Нет. |
| Анимируемое | Нет. |
| Версия | CSS3 |
| DOM Синтаксис | object.style.placeItems = "normal"; |
Синтаксис
place-items: <align-items> <justify-items>?;Допустимые ключевые слова:
place-items: auto | normal | start | end | self-start | self-end | center | left | right | baseline | first baseline | last baseline | stretch | initial | inherit;Существуют две формы:
- Одно значение — задаёт обе оси.
place-items: center;означает «выровнять по центру вертикально и горизонтально». - Два значения — первое задаёт align-items (блочная ось), второе — justify-items (строчная ось). Например,
place-items: start end;означает «сверху по вертикали, справа по горизонтали».
Спецификация CSS Grid разделяет два значения пробелом (place-items: start end), а не косой чертой. В старых материалах вы ещё можете встретить косую черту; форма с одним значением является наиболее безопасной и широко поддерживаемой.
Пример — одно значение (start)
Одно ключевое слово выравнивает элементы по обеим осям одновременно. Здесь start прижимает элемент к верхнему левому углу ячейки сетки:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#container {
height: 150px;
width: 150px;
place-items: start;
background-color: #ccc;
display: grid;
}
div > div {
box-sizing: border-box;
border: 1px solid #666;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#box1 {
background-color: #1c87c9;
min-height: 50px;
}
</style>
</head>
<body>
<h2>Place-items property example</h2>
<h3>place-items: start</h3>
<div id="container">
<div id="box1">1</div>
</div>
</body>
</html>Результат
Пример — два значения (end start)
С двумя ключевыми словами каждая ось управляется независимо. Здесь end start перемещает элемент вниз (блочная ось) и влево (строчная ось):
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#container {
height: 150px;
width: 150px;
place-items: end start;
background-color: #ccc;
display: grid;
}
div > div {
box-sizing: border-box;
border: 1px solid #666;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#box1 {
background-color: #8ebf42;
min-height: 50px;
}
</style>
</head>
<body>
<h2>place-items: end start</h2>
<div id="container">
<div id="box1">1</div>
</div>
</body>
</html>Пример — значение center
Одно ключевое слово center центрирует каждый элемент как по вертикали, так и по горизонтали внутри его ячейки сетки:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
#container {
height: 200px;
width: 230px;
place-items: center;
background-color: #ccc;
display: grid;
}
.grid {
display: grid;
}
div > div {
box-sizing: border-box;
border: 3px solid #ccc;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#box1 {
background-color: #666;
min-height: 40px;
}
#box2 {
background-color: #1c87c9;
min-height: 50px;
}
#box3 {
background-color: #fff;
min-height: 40px;
}
#box4 {
background-color: #ff0000;
min-height: 60px;
}
#box5 {
background-color: #eee;
min-height: 70px;
}
#box6 {
background-color: #8ebf42;
min-height: 50px;
}
</style>
</head>
<body>
<h2>Place-items property example</h2>
<div id="container" class="grid">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<div id="box5">5</div>
<div id="box6">6</div>
</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| auto | Если у блока нет родителя или он абсолютно позиционирован, значение «auto» ведёт себя как «normal». |
| normal | Эффект этого значения зависит от режима макета: - В блочных макетах значение «normal» ведёт себя как «start». - В макетах с абсолютным позиционированием это значение ведёт себя как «start» для замещаемых абсолютно позиционированных блоков, и как stretch для всех остальных абсолютно позиционированных блоков. - В макетах ячеек таблицы это свойство игнорируется. - В Flexbox-макетах это свойство игнорируется. - В CSS Grid-макетах это значение ведёт себя как «stretch», за исключением блоков с соотношением сторон или внутренними размерами, где оно ведёт себя как «start». |
| start | Выравнивает элемент по начальному краю его области сетки (вверху по блочной оси, слева по строчной оси в макете слева направо). |
| end | Выравнивает элемент по конечному краю его области сетки (внизу по блочной оси, справа по строчной оси в макете слева направо). |
| self-start | Позволяет элементу разместить себя у края контейнера в соответствии с собственным начальным краем. |
| self-end | Позволяет элементу разместить себя у края контейнера в соответствии с собственным конечным краем. |
| center | Элементы располагаются рядом друг с другом по центру контейнера. |
| left | Элементы располагаются рядом друг с другом у левого края контейнера. Если ось свойства не параллельна строчной оси, это значение ведёт себя как «end». |
| right | Элементы располагаются рядом друг с другом у правого края контейнера. Если ось свойства не параллельна строчной оси, это значение ведёт себя как «start». |
| baseline | Выравнивает все элементы группы, совмещая их базовые линии выравнивания. |
| first baseline | Совмещает первую базовую линию элемента с первой базовой линией строки. |
| last baseline | Совмещает последнюю базовую линию элемента с последней базовой линией строки. |
| stretch | Растягивает элемент до обоих краёв контейнера по вертикали и горизонтали, заполняя его. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
- align-items — блочная половина этого сокращения.
- justify-items — строчная половина этого сокращения.
- grid — макет, в котором
place-itemsнаиболее полезно. - justify-content — свойство для использования в Flexbox вместо
place-items.