Obiecte de loc - CSS-Tricks

place-itemsProprietatea în CSS este prescurtarea pentru align-itemsși justify-itemsproprietățile, combinarea lor într - o singură declarație.

O utilizare obișnuită este centrarea orizontală și verticală cu Grid:

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

Aceste proprietăți s-au folosit cu introducerea aspectelor Flexbox și Grid, dar sunt aplicate și la:

• Cutii la nivel de bloc
• Cutii poziționate absolut
• Poziția statică a cutiilor absolut poziționate
• Celule de masă

Sintaxă

Proprietatea acceptă valori duale, prima pentru align-itemsși a doua pentru justify-items. Ca reîmprospătare, align-itemsaliniază conținutul de-a lungul axei verticale (coloană), în timp ce justify-itemsse aliniază de-a lungul axei orizontale (rând).

.item ( display: grid; place-items: start center; )

Aceasta este la fel ca și scrierea:

.item ( display: grid; align-items: start; justify-items: center; )

Dacă este furnizată o singură valoare, atunci setează ambele proprietăți. De exemplu, aceasta:

.item ( display: grid; place-items: start; )

... este la fel ca și scrierea asta:

.item ( display: grid; align-items: start; justify-items: start; )

Valori acceptate

Ceea ce face această proprietate interesantă este că se comportă diferit în funcție de contextul în care este utilizată. De exemplu, unele valori se aplică numai Flexbox și nu vor funcționa într-o setare Grid. În plus, unele valori se aplică align-itemsproprietății în care altele se aplică justify-itemslateralului.

Mai mult, valorile în sine pot fi considerate că se încadrează într-o serie de tipuri de aliniere: contextuală, distribuție, pozițională (care devine auto-pozițională dacă se aplică direct la un element copil din aspect) și linia de bază.

Rachel Andrew are o foaie de trișare excelentă Box Alignment, care ajută la ilustrarea efectului valorilor.

Valoare	Tip	Descriere
auto	Contextual	Valoarea se ajustează în funcție de contextul elementului. Folosește justify-itemsvaloarea elementului părinte al elementului. Dacă nu există părinte sau se aplică unui element care este poziționat cu absolute, atunci valoarea devine normal.
normal	Contextual	Preia comportamentul implicit al contextului de aspect în care este aplicat. • structuri de nivel bloc: start • Absolute- poziționare: startpentru elementele absolute înlocuite și stretchpentru toate celelalte • dispuneri Tabel: Valoarea este ignorată • dispuneri flexbox: Valoarea este ignorată • dispuneri Grid: stretch, cu excepția cazului în care se utilizează un raport de aspect sau dimensionare intrinsecă în cazul în care se comportă castart
stretch	Distribuție	Extinde elementul la ambele margini ale containerului pe verticală align-itemsși pe orizontală pentru justify-items.
start	Pozițional	Toate elementele sunt aliniate între ele pe marginea de start (stânga) a containerului
end	Pozițional	Toate elementele sunt aliniate una pe cealaltă pe marginea de capăt (dreapta) a containerului
center	Pozițional	Articolele sunt aliniate una lângă alta spre centrul containerului
left	Pozițional	Articolele sunt aliniate una lângă cealaltă spre partea stângă a containerului. În cazul în care proprietatea nu este paralelă cu un standard de sus, dreapta, axa de jos, stânga, apoi se comportă ca end.
right	Pozițional	Articolele sunt aliniate una lângă cealaltă spre partea dreaptă a containerului. În cazul în care proprietatea nu este paralelă cu un standard de sus, dreapta, axa de jos, stânga, apoi se comportă ca start.
flex-start	Pozițional	O valoare numai flexbox (care revine la start) în care articolele sunt ambalate către marginea de pornire a containerului.
flex-end	Pozițional	O valoare numai flexbox (care revine la end) în care articolele sunt împachetate către marginea de capăt a containerului.
self-start	Auto-pozițional	Permite unui articol dintr-un aspect să se alinieze pe marginea containerului pe baza propriei sale părți de pornire. Practic, înlocuiește valoarea setată pentru părinte.
self-end	Auto-pozițional	Permite unui articol dintr-un aspect să se alinieze pe marginea containerului pe baza propriei laturi finale, în loc să moștenească valoarea pozițională a containerului. Practic, înlocuiește valoarea setată pentru părinte.
first baseline last baseline	De bază	Aliniază toate elementele dintr-un grup (adică celulele dintr-un rând) prin potrivirea liniilor de bază ale alinierii lor. Implicit firstdacă baselineeste utilizat singur.

Suport pentru browser

Această proprietate este inclusă în specificația Modelului de aliniere CSS Box Nivelul 3.

Asistența pentru browser a devenit destul de largă și în mare parte utilizabilă:

• Edge 79+ (tranziție post crom)
• Firefox 45+
• Chrome 59+
• Safari 11+

Referințe

• Modelul de aliniere a casetei CSS Nivelul 3 - Specificația oficială în care place-itemsproprietatea este definită inițial.
• Rețeaua dezvoltatorilor Mozilla - Documentația echipei Mozilla.
• Foaie de înșelăciune de aliniere a cutiei - schița lui Rachel Andrew este o resursă foarte utilă pentru a înțelege termenii de aliniere și definițiile acestora.