place-itemsВластивість в CSS є обраховувати для align-itemsі justify-itemsвластивостей, об'єднуючи їх в єдину декларацію.
Поширеним є використання горизонтального та вертикального центрування за допомогою Grid:
.center-inside-of-me ( display: grid; place-items: center; )Ці властивості отримали застосування із введенням макетів Flexbox та Grid, але також застосовуються до:
- Ящики на рівні блоку
- Абсолютно розташовані коробки
- Статичне положення абсолютно розташованих коробок
- Осередки таблиці
Синтаксис
Властивість приймає подвійні значення, перше для, align-itemsа друге для justify-items. Як оновлення, align-itemsвирівнює вміст уздовж вертикальної осі (стовпця), тоді як justify-itemsвирівнює вздовж горизонтальної осі (рядка).
.item ( display: grid; place-items: start center; )Це те саме, що писати:
.item ( display: grid; align-items: start; justify-items: center; )Якщо вказано лише одне значення, тоді воно встановлює обидва властивості. Наприклад, це:
.item ( display: grid; place-items: start; )... те саме, що написати це:
.item ( display: grid; align-items: start; justify-items: start; )Прийняті цінності
Цією властивістю стає цікавим те, що вона поводиться по-різному залежно від використовуваного контексту. Наприклад, деякі значення стосуються лише Flexbox і не працюють у налаштуваннях сітки. Крім того, деякі значення застосовуються до align-itemsвластивості, де інші застосовуються до justify-itemsсторони.
Далі, самі значення можна розглядати як такі, що підпадають під ряд типів вирівнювання: контекстуальне, розподілене, позиційне (яке стає самопозиційним, якщо безпосередньо застосовується до дочірнього елемента в макеті), і базове.
Рейчел Ендрю має чудову шпаргалку Box Alignment, яка допомагає проілюструвати ефект цінностей.
| Значення | Тип | Опис |
|---|---|---|
auto | Контекстуальна | Значення коригується відповідно до контексту елемента. Він використовує justify-itemsзначення батьківського елемента елемента. Якщо не батьківський елемент існує або він застосовується до елемента, який позиціонується за допомогою absolute, тоді значення стає normal. |
normal | Контекстуальна | Бере поведінку за замовчуванням контексту макета, де він застосовується. • макети рівня блоку: start• Абсолютного позиціонування: startдля замінених абсолютних елементів і stretchдля всіх інших• макетів таблиці: значення ігноруються • макетів Flexbox: значення ігноруються • макетів сітки: stretch, якщо співвідношення сторін або внутрішня проклейка не використовується там , де він веде себе подібно доstart |
stretch | Поширення | Розгортає елемент до обох країв контейнера вертикально для align-itemsі горизонтально для justify-items. |
start | Позиційний | Всі елементи вирівняні один до одного на початковому (лівому) краю контейнера |
end | Позиційний | Всі елементи вирівняні один проти одного на кінцевому (правому) краю контейнера |
center | Позиційний | Елементи розташовані поруч один з одним у напрямку до центру контейнера |
left | Позиційний | Елементи розташовані поруч один з одним у напрямку до лівої сторони контейнера. Якщо властивість не паралельна стандартній верхній, правій, нижній, лівій осі, тоді вона поводиться як end. |
right | Позиційний | Елементи розташовані поруч один з одним у напрямку до правої сторони контейнера. Якщо властивість не паралельна стандартній верхній, правій, нижній, лівій осі, тоді вона поводиться як start. |
flex-start | Позиційний | Значення лише для flexbox (яке повертається до start), де елементи упаковуються до початкового краю контейнера. |
flex-end | Позиційний | Значення лише для flexbox (яке повертається до end), де елементи упаковуються до кінцевого краю контейнера. |
self-start | Самопозиційне | Дозволяє елементу в макеті вирівнюватися по краю контейнера на основі власної початкової сторони. В основному замінює значення встановленого значення для батьків. |
self-end | Самопозиційне | Дозволяє елементу в макеті вирівнюватися по краю контейнера на основі його кінцевої сторони, а не успадковувати позиційне значення контейнера. В основному замінює значення встановленого значення для батьків. |
first baselinelast baseline | Базова лінія | Вирівнює всі елементи в групі (тобто клітинки в рядку), узгоджуючи їх базові лінії вирівнювання. За замовчуванням firstякщо baselineвикористовується самостійно. |
Підтримка браузера
Ця властивість включена до специфікації моделі рівня вирівнювання CSS Box Level 3.
Підтримка браузера стала досить широкою і в основному просто придатною для використання:
- Edge 79+ (перехід після хрому)
- Firefox 45+
- Chrome 59+
- Сафарі 11+
Список літератури
- Модель вирівнювання коробки CSS Рівень 3 - Офіційна специфікація, де
place-itemsспочатку визначається властивість. - Мережа розробників Mozilla - Документація команди Mozilla.
- Шпаргалка для вирівнювання рамки - Конспект Рейчел Ендрю є надзвичайно корисним ресурсом для розуміння термінів вирівнювання та їх визначень.