Плаце-итемс - ЦСС-трикови

place-itemsИмовина у ЦСС је скраћеница за align-itemsи justify-itemsсвојства, комбинујући их у једну декларацију.

Уобичајена употреба је хоризонтално и вертикално центрирање помоћу мреже:

.center-inside-of-me ( display: grid; place-items: center; )

Ова својства су добила примену увођењем Флекбок и Грид распореда, али се такође примењују на:

• Кутије на нивоу блока
• Апсолутно постављене кутије
• Статички положај апсолутно позиционираних кутија
• Ћелије стола

Синтакса

Својство прихвата двоструке вредности, прву за 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; )

Прихваћене вредности

Оно што ову особину чини занимљивом је то што се понаша другачије у зависности од контекста у коме се користи. На пример, неке вредности се односе само на Флекбок и неће радити у подешавању мреже. Поред тога, неке вредности се односе на align-itemsсвојство, док се друге односе на justify-itemsбочну страну.

Даље, за саме вредности се може сматрати да спадају у бројне типове поравнања: контекстуално, дистрибуционо, позиционо (које постаје самопозиционо ако се директно примени на подређени елемент у распореду) и основно.

Рацхел Андрев има изврсну цхеатс схеет листу Алигнмент Бок која помаже у илустрацији ефекта вредности.

Вредност	Тип	Опис
auto	Контекстуално	Вредност се прилагођава у складу са контекстом елемента. Користи justify-itemsвредност надређеног елемента елемента. Ако родитељ не постоји или је примењен на елемент који је позициониран са absolute, тада вредност постаје normal.
normal	Контекстуално	Узима подразумевано понашање контекста изгледа тамо где је примењен. • Изгледи на нивоу блока: start • Апсолутно позиционирање: startза замењене апсолутне елементе и stretchза све остале • Изгледи табеле: Вредност се занемарује • Флекбок распореди: Вредност се занемарује • Распоред мреже :, stretchосим ако се не користи однос ширине и висине или унутрашња величина када се понаша каоstart
stretch	Дистрибуција	Проширује елемент на обе ивице контејнера вертикално за align-itemsи водоравно за justify-items.
start	Позициони	Сви елементи су поравнати један према другом на почетној (левој) ивици контејнера
end	Позициони	Сви елементи су поравнати један према другом на крајњој (десној) ивици контејнера
center	Позициони	Предмети су поредани један поред другог према центру контејнера
left	Позициони	Предмети су поредани један поред другог према левој страни контејнера. Ако својство није паралелно стандардној горњој, десној, доњој, левој оси, онда се понаша као end.
right	Позициони	Предмети су поредани један поред другог према десној страни контејнера. Ако својство није паралелно стандардној горњој, десној, доњој, левој оси, онда се понаша као start.
flex-start	Позициони	Вредност само за флекбок (која се враћа назад start) где се предмети спакују према почетној ивици контејнера.
flex-end	Позициони	Вредност само за флекбок (која се враћа назад end) где се предмети спакују према крајњој ивици контејнера.
self-start	Самопозициони	Омогућава ставци у распореду да се поравна на ивици контејнера на основу сопствене почетне стране. У основи поништава вредност постављене вредности надређеног.
self-end	Самопозициони	Омогућава ставци у распореду да се поравна на ивици контејнера на основу сопствене крајње стране уместо да наследи позициону вредност контејнера. У основи замењује постављену вредност надређеног.
first baseline last baseline	Полазна линија	Поравнава све елементе у групи (тј. Ћелије у реду) поклапајући њихове основне линије поравнања. Подразумевано firstако baselineсе користи самостално.

Подршка прегледача

Ово својство је укључено у спецификацију ЦСС модела поравнања оквира нивоа 3.

Подршка прегледача је постала прилично широка и углавном употребљива:

• Едге 79+ (транзиција после хрома)
• Фирефок 45+
• Цхроме 59+
• Сафари 11+

Референце

• ЦСС Модел поравнања оквира ниво 3 - званична спецификација где је place-itemsсвојство иницијално дефинисано.
• Мозилла Девелопер Нетворк - Документација тима Мозилла.
• Варалица за поравнавање оквира - Сврха Рацхел Андрев је од велике помоћи за разумевање појмова за поравнање и њихових дефиниција.