CSS place-content — вирівнювання вмісту одним рядком

CSS властивість place-content — скорочення для align-content і justify-content: вирівнювання всього вмісту контейнера по обох осях одним рядком.

правити

Загальний опис

Перше значення — вертикальна вісь (align-content), друге — горизонтальна (justify-content); одне значення застосовується до обох: place-content: center центрує вміст повністю.

Працює в grid і flex-контейнерах, а керує рядами цілком (не окремими елементами — для них є place-items): як розподілити доріжки сітки чи ряди флексу в зайвому просторі — притиснути, центрувати, розкидати з проміжками (space-between).

Пам'ятка з граблями: у флексі align-content працює лише при кількох рядках (flex-wrap: wrap) — з одним рядком видимого ефекту не буде.

правити

+ додати пораду чи нотатку

Переглядачі

Переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

<div class="board">
    <div>1</div><div>2</div>
    <div>3</div><div>4</div>
</div>

.board {
    display: grid;
    grid-template-columns: repeat(2, 60px);
    height: 220px;
    border: 1px dashed #999;
    /* align-content + justify-content разом */
    place-content: center;
}

.board div {
    background: #0172ad;
    color: #fff;
    text-align: center;
}