CSS свойство place-items

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

Эти свойства в основном используются в макетах Grid и для абсолютно позиционированных элементов. Обратите внимание, что place-items игнорируется в макетах Flexbox и не влияет на стандартные блочные элементы или ячейки таблиц.

INFO

Свойство place-items ведет себя по-разному в зависимости от контекста использования.

Подробнее о поведении свойства place-items в различных контекстах читайте ниже.

Начальное значение	normal legacy
Применяется к	Ко всем элементам.
Наследуется	Нет.
Анимация	Нет.
Версия	CSS3
Синтаксис DOM	object.style.placeItems = "normal";

Синтаксис

Синтаксис CSS place-items

css

place-items: <align-items> [ / <justify-items> ]?;
/* Expanded values */
place-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first baseline | last baseline | stretch | initial | inherit;

Примечание: При использовании одного значения оно применяется к обеим осям. При использовании двух значений, разделенных косой чертой (/), первое значение устанавливает align-items, а второе — justify-items.

Пример свойства place-items:

Пример кода CSS place-items

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #container {
        height: 150px;
        width: 150px;
        place-items: flex-end;
        background-color: #ccc;
        display: grid;
      }
      .grid {
        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: flex-end</h3>
    <div id="container" class="grid">
      <div id="box1">1</div>
    </div>
  </body>
</html>

Try it Yourself »

Результат

SS place-items another

Пример свойства place-items со значением "center":

Другой пример кода CSS place-items

html

<!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>

Try it Yourself »

Значения

Значение	Описание
auto	Если у элемента нет родителя или он абсолютно позиционирован, значение "auto" ведет себя как "normal".
normal	Эффект этого значения зависит от режима макета: - В блочных макетах значение "normal" ведет себя как "start". - В макетах с абсолютным позиционированием это значение ведет себя как "start" для замененных абсолютно позиционированных элементов и как stretch для всех остальных абсолютно позиционированных элементов. - В макетах ячеек таблицы это свойство игнорируется. - В макетах flexbox это свойство игнорируется. - В макетах grid это значение ведет себя как "stretch", за исключением элементов с соотношением сторон или внутренними размерами, где оно ведет себя как "start".
start	Все элементы позиционируются друг относительно друга по начальному (левому) краю контейнера.
end	Все элементы позиционируются друг относительно друга по конечному (правому) краю контейнера.
flex-start	Элементы размещаются в начале контейнера.
flex-end	Элементы размещаются в конце контейнера.
self-start	Элемент может размещаться на краю контейнера, ориентируясь на свою собственную начальную сторону.
self-end	Элемент может размещаться на краю контейнера, ориентируясь на свою собственную конечную сторону.
center	Элементы позиционируются рядом друг с другом к центру контейнера.
left	Элементы размещаются рядом друг с другом к левой стороне контейнера. Если ось свойства не параллельна строчной оси, это значение ведет себя как "end".
right	Элементы размещаются рядом друг с другом к правой стороне контейнера. Если ось свойства не параллельна строчной оси, это значение ведет себя как "start".
baseline	Выравнивает все элементы внутри группы по их базовым линиям.
first baseline	Выравнивает первую базовую линию элемента с первой базовой линией строки.
last baseline	Выравнивает последнюю базовую линию элемента с последней базовой линией строки.
stretch	Растягивает элемент по вертикали и горизонтали до краев контейнера, чтобы заполнить его.
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Что делает свойство 'place-items' в CSS?

Оно задает значения justify-self и align-self по умолчанию для всех элементов контейнера.Оно изменяет цвет всех элементов в контейнере.Оно управляет пространством между ячейками CSS Grid.Оно объединяет два отдельных свойства в одно сокращенное свойство.Оно задает z-index для всех элементов контейнера.

CSS свойство place-items ​

Синтаксис ​

Пример свойства place-items: ​

Результат ​

Пример свойства place-items со значением "center": ​

Значения ​