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

Свойство `place-content` задает выравнивание элементов по главной и поперечной осям для флекс элементов, и по горизонтальной и вертикальной осям для гридов. Первым значением указывается выравнивание по главной (горизонтальной) оси, вторым значением - поперечной (вертикальной). Свойство применяется к родительскому элементу.

## Синтаксис

`селектор { place-content: главная_ось поперечная_ось; }`

## Пример . Выравнивание по началу главной и центру поперечной осей

Сейчас элементы прижаты к верхней части главной оси и одновременно находятся по центру поперечной:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: flex; place-content: start center; flex-wrap: wrap; height: 200px; border: 1px solid #696989; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }`

:

## Пример . Выравнивание по центру главной и концу поперечной осей

А теперь элементы расположены по центру главной оси и в конце поперечной:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: flex; place-content: center end; flex-wrap: wrap; height: 200px; border: 1px solid #696989; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }`

:

## Пример . Выравнивание по концу главной и началу поперечной осей

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

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: flex; place-content: end start; flex-wrap: wrap; height: 200px; border: 1px solid #696989; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }`

:

## Пример . Выравнивание по началу вертикальной и концу горизонтальной осей в гриде

Давайте выравним наши элементы по началу вертикальной и концу горизонтальной осей:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: grid; place-content: start end; grid-template-columns: 100px 100px; gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; } #parent > div { gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; }`

:

## Пример . Выравнивание по центру вертикальной и началу горизонтальной осей в гриде

Давайте выравним наши элементы по центру вертикальной и началу горизонтальной осей:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: grid; place-content: center start; grid-template-columns: 100px 100px; gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; } #parent > div { gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; }`

:

## Пример . Выравнивание по концу вертикальной и началу горизонтальной осей в гриде

Давайте выравним наши элементы по концу вертикальной и началу горизонтальной осей:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: grid; place-content: end start; grid-template-columns: 100px 100px; gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; } #parent > div { gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; }`

:

## Смотрите также

- свойство `align-content`,
  которое задает выравнивание по поперечной или вертикальной оси
- свойство `justify-content`,
  которое задает выравнивание по главной оси

← →
↑
en ru