Перейти к содержанию

place-items

Сокращенное свойство place-items устанавливает свойства align-items и justify-items соответственно. Если второе значение не установлено, для него также используется первое значение.

Синтаксис

/* Keyword values */
place-items: auto center;
place-items: normal start;

/* Positional alignment */
place-items: center normal;
place-items: start auto;
place-items: end normal;
place-items: self-start auto;
place-items: self-end normal;
place-items: flex-start auto;
place-items: flex-end normal;
place-items: left auto;
place-items: right normal;

/* Baseline alignment */
place-items: baseline normal;
place-items: first baseline auto;
place-items: last baseline normal;
place-items: stretch auto;

/* Global values */
place-items: inherit;
place-items: initial;
place-items: unset;

Значения

Значение по-умолчанию: normal legacy

Спецификации

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

  • Chrome 59+
  • Firefox 45+

Описание и примеры

#container {
  height: 200px;
  width: 240px;
  place-items: center; /* You can change this value by selecting another option in the list */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

См. также