Позиции - CSS-трикове

В place-itemsимота в CSS е съкращение за align-itemsи justify-itemsсвойства, да ги комбинирате в една обща декларация.

Често се използва хоризонтално и вертикално центриране с мрежата:

.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 baseline last baseline	Базова линия	Подравнява всички елементи в група (т.е. клетки в ред) чрез съвпадение на техните базови линии за подравняване. По подразбиране firstако baselineсе използва самостоятелно.

Поддръжка на браузър

Това свойство е включено в спецификацията на CSS Box Alignment Model Level 3.

Поддръжката на браузъра е станала доста широка и до голяма степен просто използваема:

• Edge 79+ (Trans Chromium transision)
• Firefox 45+
• Chrome 59+
• Safari 11+

Препратки

• CSS Box Alignment Model Level 3 - Официалната спецификация, където place-itemsсвойството е дефинирано първоначално.
• Mozilla Developer Network - Документацията на екипа на Mozilla.
• Изравнителна таблица за подравняване на полета - Контурът на Рейчъл Андрю е изключително полезен ресурс за разбиране на термините за подравняване и техните дефиниции.