Свойство place-content в CSS

Определение и использование

place-content Свойства используются для布局 эластичного контейнера (flexbox) и сетки (grid) и являются сокращением следующих свойств:

Если свойство place-content имеет два значения:

place-content: start center;
  • Значение свойства align-content 'start'
  • Значение свойства justify-content 'center'

Если свойство place-content имеет только один значение:

place-content: end;
  • Значения свойств align-content и justify-content должны быть 'end'

Пример

Пример 1

Установите эластичность в нижней части эластичного контейнера и равномерно распределите расстояние между эластичными элементами по горизонтали:

#container {
  display: flex;
  place-content: end space-between;

Попробуйте сами

Пример 2: сеточное форматирование

Дополнительное пространство в направлении блока равномерно распределено вокруг каждого сеточного элемента, и сеточные элементы выравниваются по центру в направлении строки:

#container {
  display: grid;
  place-content: space-around center;

Попробуйте сами

CSS синтаксис

place-content: normal|value|initial|inherit;

Значение свойства

Значение Описание
normal

Значение по умолчанию. Зависит от контекста布局а.

Эквивалентно не установленных значений для align-content и justify-content.
stretch

Сетка: если размер не установлен, то сеточные элементы растягиваются, чтобы заполнить сеточный контейнер.

Эластичный контейнер: если размер эластичного элемента не указан в перекрестной оси, то он растягивается, чтобы заполнить эластичный контейнер.
start Элементы выравниваются по началу контейнера.
end Элементы выравниваются по концу контейнера.
center Элементы выравниваются по центру контейнера.
space-between Произвольное распределение доступного пространства по двум осям контейнера, чтобы расстояние между элементами было одинаковым.
space-around Произвольное распределение доступного пространства по двум осям контейнера, чтобы расстояние вокруг каждого элемента было одинаковым.
space-evenly Произвольное распределение элементов по двум осям контейнера.
overflow-alignment

'safe': если контент выходит за пределы, то выравнивание элементов устанавливается в 'start'.

'unsafe': значение остается неизменным, независимо от того, выходит ли контент за пределы.
initial Этот атрибут устанавливается в значение по умолчанию. См. также: initial.
inherit Этот атрибут наследуется от родительского элемента. См. также: inherit.

Технические детали

Значение по умолчанию: normal
Инheritability: Нет
Создание анимации: Не поддерживается. См. также:Свойства анимации.
Версия: CSS3
JavaScript синтаксис: object.style.placeContent="end space-around"

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

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
59.0 79.0 53.0 11.0 46.0

Связанные страницы

Учебник:CSS сеточное форматирование

Учебник:CSS эластичное блоковое форматирование

Ссылка:Свойство align-content CSS

Ссылка:Свойство CSS justify-content

Ссылка:Свойство alignContent в HTML DOM