Mjesto-predmeti - CSS-trikovi

place-itemsNekretnina u CSS je skraćenica za align-itemsi justify-itemssvojstva, kombinirajući ih u jednu izjavu.

Uobičajena je upotreba horizontalno i vertikalno centriranje pomoću mreže:

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

Ova svojstva su se koristila uvođenjem Flexbox i Grid izgleda, ali se također primjenjuju na:

• Kutije na razini bloka
• Apsolutno postavljene kutije
• Statički položaj apsolutno postavljenih kutija
• Stanice tablice

Sintaksa

Svojstvo prihvaća dvostruke vrijednosti, prvu za align-itemsi drugu za justify-items. Kao osvježivač, align-itemsporavnava sadržaj duž vertikalne osi (stupca), dok justify-itemsporavnava duž vodoravne osi (reda).

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

To je isto kao i pisanje:

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

Ako je navedena samo jedna vrijednost, ona postavlja oba svojstva. Na primjer, ovo:

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

... isto je što i napisati ovo:

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

Prihvaćene vrijednosti

Ono što ovo svojstvo čini zanimljivim jest to što se ponaša drugačije ovisno o kontekstu u kojem se koristi. Na primjer, neke vrijednosti odnose se samo na Flexbox i neće funkcionirati u postavci mreže. Uz to, neke vrijednosti odnose se na align-itemssvojstvo, dok se druge primjenjuju na justify-itemsbočnu stranu.

Nadalje, za same vrijednosti može se smatrati da spadaju u brojne tipove poravnanja: kontekstualno, distribucijsko, pozicijsko (koje postaje samopoziciono ako se izravno primijeni na podređeni element u izgledu) i osnovno.

Rachel Andrew ima izvrsnu varalicu Box Alignment koja pomaže ilustrirati učinak vrijednosti.

Vrijednost	Tip	Opis
auto	Kontekstualno	Vrijednost se prilagođava u skladu s kontekstom elementa. Koristi justify-itemsvrijednost nadređenog elementa elementa. Ako ne postoji nadređeni element ili je primijenjen na element koji je pozicioniran s absolute, tada vrijednost postaje normal.
normal	Kontekstualno	Primjenjuje zadano ponašanje konteksta izgleda tamo gdje je primijenjen. • Izgledi na razini bloka: start • Apsolutno pozicioniranje: startza zamijenjene apsolutne elemente i stretchza sve ostale • Izgledi tablice: Vrijednost se zanemaruje • Izgledi Flexbox-a: Vrijednost se zanemaruje • Izgledi mreže :, stretchosim ako se ne koristi omjer slike ili unutarnje veličine, gdje se ponaša Kaostart
stretch	Distribucija	Proširuje element na oba ruba spremnika okomito za align-itemsi vodoravno za justify-items.
start	Pozicijski	Svi su elementi međusobno poravnati na početnom (lijevom) rubu spremnika
end	Pozicijski	Svi su elementi poravnati jedni protiv drugih na završnom (desnom) rubu spremnika
center	Pozicijski	Predmeti su poredani jedan do drugog prema središtu spremnika
left	Pozicijski	Predmeti su poredani jedan do drugog prema lijevoj strani spremnika. Ako svojstvo nije paralelno sa standardnom gornjom, desnom, donjom, lijevom osi, tada se ponaša kao end.
right	Pozicijski	Predmeti su poredani jedan do drugog prema desnoj strani spremnika. Ako svojstvo nije paralelno sa standardnom gornjom, desnom, donjom, lijevom osi, tada se ponaša kao start.
flex-start	Pozicijski	Vrijednost samo za flexbox (koja se vraća natrag start) gdje se predmeti pakiraju prema početnom rubu spremnika.
flex-end	Pozicijski	Vrijednost samo za flexbox (koja se vraća natrag end) gdje su predmeti spakirani prema završnom rubu spremnika.
self-start	Samopozicioni	Omogućuje stavci u rasporedu da se poravna na rubu spremnika na temelju vlastite početne strane. U osnovi nadjačava postavljenu vrijednost nadređenog.
self-end	Samopozicioni	Omogućuje stavci u rasporedu da se poravna na rubu spremnika na temelju vlastite završne strane, umjesto da nasljeđuje pozicijsku vrijednost spremnika. U osnovi nadjačava postavljenu vrijednost nadređenog.
first baseline last baseline	Osnovna linija	Poravnava sve elemente u grupi (tj. Stanice unutar reda) poklapajući njihove osnovne linije poravnanja. Zadano firstako baselinese koristi samostalno.

Podrška preglednika

Ovo je svojstvo uključeno u specifikaciju CSS modela poravnanja okvira razine 3.

Podrška za preglednik postala je prilično široka i uglavnom upotrebljiva:

• Edge 79+ (tranzicija nakon kroma)
• Firefox 45+
• Chrome 59+
• Safari 11+

Reference

• CSS Model poravnanja okvira Razina 3 - službena specifikacija gdje je place-itemssvojstvo inicijalno definirano.
• Mozilla Developer Network - dokumentacija Mozilla tima.
• Varalica za poravnavanje okvira - nacrt Rachel Andrew super je koristan resurs za razumijevanje pojmova za poravnanje i njihovih definicija.