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

Определение и применение

Свойство place-content объединяет align-content и justify-content: во Flexbox управляет распределением по поперечной и главной осям, а в Grid — по блочной и строчной осям.

Более подробную информацию о работе с флекс элементами вы можете получить в статье учебника CSS "Верстка по Flexbox (работа с контейнерами)".

Попробуйте значения place-content

Меняется положение всей группы строк и колонок. Дорожки имеют фиксированный размер, оставляя свободное место.

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

place-content: start

HTML и CSS примера
HTML
<div class="stage demo-target">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.demo-target {
  display: grid;
  grid-template-columns: repeat(2, 70px);
  grid-template-rows: repeat(2, 60px);
  gap: 8px;
  place-content: start;
}

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

Спецификация: CSS align

Поддерживается во всех основных браузерах с 2020 года.

Показать браузеры
Совместимостьcss.properties.place-content
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
place-content✓59✓79✓45✓46✓9✓59✓45✓43✓9✓7.0✓59✓9
В flex-контейнере✓59✓79✓45

Версия 45 выпущена в 2016 г.

Примечание MDN (англ.)

Starting with version 60, you can only specify a single value if it is valid for both align-content and justify-content.

✓46✓9✓59✓45

Версия 45 выпущена в 2016 г.

Примечание MDN (англ.)

Starting with version 60, you can only specify a single value if it is valid for both align-content and justify-content.

✓43✓9✓7.0✓59✓9
В grid-контейнере✓59✓79✓53

Версия 53 выпущена в 2017 г.

Примечание MDN (англ.)

Starting with version 60, you can only specify a single value if it is valid for both align-content and justify-content.

✓46✓11✓59✓53

Версия 53 выпущена в 2017 г.

Примечание MDN (англ.)

Starting with version 60, you can only specify a single value if it is valid for both align-content and justify-content.

✓43✓11✓7.0✓59✓11

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
place-content: <'align-content'> <'justify-content'>?;

/* Глобальные значения */
place-content: initial | inherit | unset | revert | revert-layer;

? — необязательная часть.

JavaScript синтаксис:

JavaScript
element.style.placeContent = "center center";

Начальное значение свойства

  • align-content — normal;
  • justify-content — normal.

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

Значения place-content
Значение Описание
align-content Определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально), или производит выравнивание всего макета сетки по оси столбца grid-контейнера. Возможные значения:
  • stretch - строки внутри контейнера равномерно растягиваются, заполняя свободное пространство (изменяет размер элементов сетки, или флекс элементов, чтобы элементы заполнили всю высоту контейнера). Начальное значение.
  • flex-start - строки внутри контейнера располагаются в начале поперечной оси флекс контейнера, или начального края сетки grid-контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения start, для флекс элементов необходимо использовать полное значение flex-start
  • flex-end - строки внутри контейнера располагаются в конце поперечной оси флекс контейнера, или по краю сетки grid-контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения end, для флекс элементов необходимо использовать полное значение flex-end.
  • center - строки внутри контейнера располагаются по его центру.
  • space-between - строки внутри контейнера равномерно распределяются, при этом первая строка позиционируются в начале поперечной оси, а последняя строка позиционируется с конца поперечной оси.
  • space-around - строки внутри контейнера равномерно распределяются, при этом пространство между двумя соседними строками одинаково, а пустое пространство перед первой строкой и после последней строки равно половине от пространства между соседними строками:
    Схематичное отображение работы значения space-around свойства align-content
  • space-evenly - размещает четный промежуток между каждой строкой, включая верхний и нижний край контейнера:
    Схематичное отображение работы значения space-evenly свойства align-content

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

justify-content Определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль главной оси контейнера (горизонтально), или производит выравнивание всего макета сетки по оси строки grid-контейнера. Возможные значения:
  • flex-start - элементы позиционируются в начале контейнера. Начальное значение.
    Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения start, для флекс элементов необходимо использовать полное значение flex-start
  • flex-end - элементы позиционируются в конце контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения end, для флекс элементов необходимо использовать полное значение flex-end
  • center - элементы позиционируются в центре строки контейнера.
  • space-between - элементы равномерно распределяются по всей строке, при этом первый элемент позиционируются в начале контейнера, а последний элемент позиционируется в конце контейнера
  • space-around - элементы равномерно распределяются по всей строке, при этом пустое пространство между первым и после последнего элемента равно половине между соседними элементами в контейнере:
    Схематичное отображение работы значения space-around свойства justify-content
  • space-evenly - размещает четный промежуток между каждым элементом, включая начальний и дальний конец контейнера:
    Схематичное отображение работы значения space-evenly свойства justify-content
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства place-content устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

CSS Box Alignment — спецификация place-content.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

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

Выравнивание в Grid

Замените center на space-between. Перемещаются дорожки сетки целиком внутри свободного места.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.container {
    background: #eef2f5;
    border: 1px dashed #8495a5;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Выравнивание в Grid</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item target">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
style.css
CSS
.container {
    display: grid;
    grid-template: repeat(2, 50px) / repeat(2, 70px);
    height: 180px;
    place-content: center;
}

Выравнивание строк Flexbox

Сравните расположение строк и элементов. Измените center на space-between. Первая часть place-content требует нескольких строк и свободного места по поперечной оси.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
.container {
    background: #eef2f5;
}
.item {
    padding: 8px;
    border: 1px solid #35658a;
    background: #c5dbea;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Выравнивание строк Flexbox</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
style.css
CSS
.container {
    display: flex;
    flex-wrap: wrap;
    height: 200px;
    place-content: center;
}
.item {
    flex: 0 0 40%;
}