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	Значение элемента наследуется от родительского элемента.