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

place-content

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

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

Flexbox и выравнивание

Руководство по Flexbox

Синтаксис

/* 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

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

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

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

  • 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>

См. также