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

CSS-свойство place-content — CSS-сокращённое свойство, которое позволяет одновременно выравнивать содержимое по блочной и строчной осям (то есть задавать свойства align-content и justify-content) в соответствующей системе компоновки, например Grid или Flexbox.

Попробуйте

place-content: end space-between;

place-content: space-around start;

place-content: start space-evenly;

place-content: end center;

place-content: end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 60px 60px;
  grid-auto-rows: 40px;
  height: 180px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Составные свойства

Это сокращённая запись для следующих CSS-свойств:

• align-content
• justify-content

Синтаксис

/* Positional alignment */
/* align-content does not take left and right values */
place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;

/* Baseline alignment */
/* justify-content does not take baseline values */
place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;

/* Distributed alignment */
place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly;

/* Global values */
place-content: inherit;
place-content: initial;
place-content: revert;
place-content: revert-layer;
place-content: unset;

Первое значение задаёт значение свойства align-content, второе — свойства justify-content.

Значения

start

Элементы плотно располагаются друг к другу у начального края контейнера выравнивания по соответствующей оси.

end

Элементы плотно располагаются друг к другу у конечного края контейнера выравнивания по соответствующей оси.

flex-start

Элементы плотно располагаются друг к другу у края контейнера выравнивания, соответствующего стороне main-start или cross-start flex-контейнера. Применяется только к элементам flex-макета. Для элементов, не являющихся дочерними элементами flex-контейнера, это значение обрабатывается как start.

flex-end

Элементы плотно располагаются друг к другу у края контейнера выравнивания, соответствующего стороне main-end или cross-end flex-контейнера. Применяется только к элементам flex-макета. Для элементов, не являющихся дочерними элементами flex-контейнера, это значение обрабатывается как end.

center

Элементы плотно располагаются друг к другу по центру контейнера выравнивания.

left

Элементы плотно располагаются друг к другу у левого края контейнера выравнивания. Если ось свойства не параллельна строчной оси, это значение действует как start.

right

Элементы плотно располагаются друг к другу у правого края контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна строчной оси, это значение действует как start.

space-between

Элементы равномерно распределяются внутри контейнера выравнивания. Расстояние между каждой парой соседних элементов одинаково. Первый элемент примыкает к начальному краю, а последний — к конечному краю.

baseline, first baseline, last baseline

Задаёт участие в выравнивании по первой или последней базовой линии: базовая линия выравнивания первого или последнего набора базовых линий блока совмещается с соответствующей базовой линией в общей группе первых или последних базовых линий всех блоков, входящих в группу выравнивания по базовой линии. Резервное выравнивание для first baseline — start, а для last baseline — end.

space-around

Элементы равномерно распределяются внутри контейнера выравнивания. Расстояние между каждой парой соседних элементов одинаково. Свободное пространство перед первым и после последнего элемента равно половине расстояния между каждой парой соседних элементов.

space-evenly

Элементы равномерно распределяются внутри контейнера выравнивания. Расстояния между каждой парой соседних элементов, между начальным краем и первым элементом, а также между конечным краем и последним элементом в точности одинаковы.

stretch

Если суммарный размер элементов меньше размера контейнера выравнивания, размеры элементов с размером auto увеличиваются поровну (не пропорционально), при этом соблюдаются ограничения, задаваемые свойствами max-height/max-width (или эквивалентной функциональностью), так что суммарный размер точно заполняет контейнер выравнивания

safe

Используется вместе с ключевым словом выравнивания. Если выбранное ключевое слово приводит к переполнению контейнера выравнивания с потерей данных, элемент выравнивается так, как если бы режимом выравнивания было start.

unsafe

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

Формальное определение

Формальный синтаксис

place-content = 
  <'align-content'> <'justify-content'>?

Примеры

Размещение содержимого во flex-контейнере

HTML

<div id="container">
  <div class="small">Lorem</div>
  <div class="small">Lorem<br />ipsum</div>
  <div class="large">Lorem</div>
  <div class="large">Lorem<br />ipsum</div>
  <div class="large"></div>
  <div class="large"></div>
</div>

<code>writing-mode:</code
><select id="writingMode">
  <option value="horizontal-tb" selected>horizontal-tb</option>
  <option value="vertical-rl">vertical-rl</option>
  <option value="vertical-lr">vertical-lr</option>
  <option value="sideways-rl">sideways-rl</option>
  <option value="sideways-lr">sideways-lr</option></select
><code>;</code><br />

<code>direction:</code
><select id="direction">
  <option value="ltr" selected>ltr</option>
  <option value="rtl">rtl</option></select
><code>;</code><br />

<code>place-content:</code
><select id="alignContentAlignment">
  <option value="normal">normal</option>
  <option value="first baseline">first baseline</option>
  <option value="last baseline">last baseline</option>
  <option value="baseline">baseline</option>
  <option value="space-between">space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly" selected>space-evenly</option>
  <option value="stretch">stretch</option>
  <option value="center">center</option>
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="safe">safe</option>
  <option value="unsafe">unsafe</option>
</select>
<select id="justifyContentAlignment">
  <option value="normal">normal</option>
  <option value="space-between">space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
  <option value="center" selected>center</option>
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="safe">safe</option>
  <option value="unsafe">unsafe</option></select
><code>;</code>

function update() {
  document.getElementById("container").style.placeContent =
    `${document.getElementById("alignContentAlignment").value} ` +
    `${document.getElementById("justifyContentAlignment").value}`;
}

const alignContentAlignment = document.getElementById("alignContentAlignment");
alignContentAlignment.addEventListener("change", update);

const justifyContentAlignment = document.getElementById(
  "justifyContentAlignment",
);
justifyContentAlignment.addEventListener("change", update);

const writingM = document.getElementById("writingMode");
writingM.addEventListener("change", (evt) => {
  document.getElementById("container").style.writingMode = evt.target.value;
});

const direction = document.getElementById("direction");
direction.addEventListener("change", (evt) => {
  document.getElementById("container").style.direction = evt.target.value;
});

CSS

#container {
  display: flex;
  height: 240px;
  width: 240px;
  flex-wrap: wrap;
  background-color: #8c8c8c;
  writing-mode: horizontal-tb; /* Can be changed in the live sample */
  direction: ltr; /* Can be changed in the live sample */
  place-content: flex-end center; /* Can be changed in the live sample */
}

div > div {
  border: 2px solid #8c8c8c;
  width: 50px;
  background-color: #a0c8ff;
}

.small {
  font-size: 12px;
  height: 40px;
}

.large {
  font-size: 14px;
  height: 50px;
}

Результат

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

Совместимость с браузерами

См. также

• align-content
• justify-content
• Основные понятия Flexbox
• Выравнивание элементов во flex-контейнере
• Выравнивание блоков в Grid-макете
• Модуль выравнивания блоков CSS