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

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

Вышеуказанные свойства стали использоваться с введением Flexbox и макетов на основе сетки, но также применяются к:

  • абсолютно позиционированным блокам
  • блочным элементам
  • статическим положениям абсолютно позиционированных блоков
  • ячейкам таблицы
Свойство place-items работает по-разному в зависимости от пользовательского контекста.

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

Значение по умолчанию normal legacy
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.placeItemsw = "normal";

Синтаксис

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;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      #container {
      height:150px;
      width: 150px;
      place-items: flex-end; 
      background-color: #ccc;
      }
      .flex {
      display: flex;
      flex-wrap: wrap;
      }
      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</h2>
    <h3>place-items: flex-end</h3>
    <div id="container" class="flex">
      <div id="box1">1</div>
    </div>
  </body>
</html>

Рассмотрим другой пример со свойством place-items:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа  </title>
    <style> 
      #container {
      height:200px;
      width: 230px;
      place-items: center; 
      background-color: #ccc;
      }
      .flex {
      display: flex;
      flex-wrap: wrap;
      }
      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</h2>
    <div id="container" class="flex">
      <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 для всех остальных абсолютно позиционированных блоков.
  • В макетах ячеек таблицы данное свойство игнорируется.
  • В гибких макетах данное свойство игнорируется.
  • В макетах на основе сетки это значение работает как "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 Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
59.0+ 45.0+ ? ?

Практикуйте свои знания

What does the CSS property 'place-items' do?
Считаете ли это полезным?