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>
См. также¶
- Свойство
align-content
- Свойство
justify-content