Перейти к содержанию

place-content¶

Свойство place-content является сокращением для align-content и justify-content. Он может использоваться в любом методе компоновки, который использует оба этих значения выравнивания.

Первое значение - это значение свойства 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: unset;

Значения¶

Значение по-умолчанию: normal

Применяется к флекс-элементам

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

CSS Box Alignment Module Level 3

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

Chrome 59+
Firefox 53+
Safari
Android 59+

Описание и примеры¶

#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;
}

<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 />impsum</div>
  <div class="large"></div>
  <div class="large"></div>
</div>

См. также¶