содержимое-местоположение

Это свойство является сокращением следующих свойств 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

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

baseline, first baseline, last baseline

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

space-around

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

space-evenly

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

stretch

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

safe

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

unsafe

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

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

<align-content> = 
  normal                                   |
  <baseline-position>                      |
  <content-distribution>                   |
  <overflow-position>? <content-position>  

<justify-content> = 
  normal                                              |
  <content-distribution>                              |
  <overflow-position>? [ <content-position> | left | right ]  

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<content-distribution> = 
  space-between  |
  space-around   |
  space-evenly   |
  stretch        

<overflow-position> = 
  unsafe  |
  safe    

<content-position> = 
  center      |
  start       |
  end         |
  flex-start  |
  flex-end    

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>

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
• Основные понятия гибкой компоновки
• Выравнивание элементов в контейнере гибкой компоновки
• Выравнивание блоков в сетке CSS
• Модуль выравнивания блоков CSS