Predmeti - CSS-triki

place-itemsHotel v CSS je okrajšava za align-itemsin justify-itemslastnosti, ki jih združuje v eno samo izjavo.

Pogosta uporaba je vodoravno in navpično centriranje z mrežo:

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

Te lastnosti so se začele uporabljati z uvedbo postavitev Flexbox in Grid, vendar se uporabljajo tudi za:

• Polja na ravni bloka
• Absolutno postavljene škatle
• Statični položaj absolutno postavljenih škatel
• Celice tabele

Sintaksa

Lastnost sprejema dvojne vrednosti, prvo za align-itemsin drugo za justify-items. Kot osvežitev align-itemsporavna vsebino vzdolž navpične osi (stolpca), medtem ko justify-itemsporavna vzdolž vodoravne osi (vrstice).

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

To je enako pisanju:

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

Če je navedena samo ena vrednost, potem nastavi obe lastnosti. Na primer to:

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

… Je enako kot pisanje tega:

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

Sprejete vrednosti

Zaradi te lastnosti je zanimivo to, da se obnaša drugače glede na uporabljeni kontekst. Na primer, nekatere vrednosti veljajo samo za Flexbox in ne bodo delovale v nastavitvi mreže. Poleg tega nekatere vrednosti veljajo za align-itemslastnost, druge pa za justify-itemsstran.

Nadalje lahko za same vrednosti štejemo, da spadajo v številne vrste poravnave: kontekstualno, porazdelitveno, pozicijsko (ki postane samopozicijsko, če se neposredno uporabi za podrejeni element v postavitvi) in izhodišče.

Rachel Andrew ima odličen goljufiv Box Alignment, ki pomaga ponazoriti učinek vrednosti.

Vrednost	Tip	Opis
auto	Kontekstualno	Vrednost se ustrezno prilagodi glede na kontekst elementa. Uporablja justify-itemsvrednost nadrejenega elementa elementa. Če ne obstaja nadrejeni element ali je uveljavljen za element, ki je pozicioniran z absolute, potem vrednost postane normal.
normal	Kontekstualno	Zavzame privzeto vedenje konteksta postavitve, kjer je uporabljen. • Postavitve na ravni bloka: start • Absolutno pozicioniranje: startza nadomeščene absolutne elemente in stretchza vse ostale • Postavitve tabel: Vrednost je prezrta • Postavitve Flexbox: Vrednost je prezrta • Postavitve mreže :, stretchrazen če se ne uporablja razmerje stranic ali lastna velikost všečstart
stretch	Porazdelitev	Razširi element na oba roba vsebnika navpično za align-itemsin vodoravno za justify-items.
start	Pozicijski	Vsi elementi so poravnani drug proti drugemu na začetnem (levem) robu posode
end	Pozicijski	Vsi elementi so poravnani drug proti drugemu na končnem (desnem) robu posode
center	Pozicijski	Predmeti so poravnani drug ob drugem proti sredini posode
left	Pozicijski	Predmeti so poravnani drug ob drugem proti levi strani posode. Če lastnost ni vzporedna s standardno zgornjo, desno, spodnjo, levo osjo, se obnaša kot end.
right	Pozicijski	Predmeti so poravnani drug ob drugem proti desni strani posode. Če lastnost ni vzporedna s standardno zgornjo, desno, spodnjo, levo osjo, se obnaša kot start.
flex-start	Pozicijski	Vrednost samo za flexbox (ki se vrne nazaj start), kjer so predmeti pakirani proti začetnemu robu vsebnika.
flex-end	Pozicijski	Vrednost samo za flexbox (ki se vrne nazaj end), kjer so predmeti pakirani proti končnemu robu posode.
self-start	Samopozicijski	Elementu v postavitvi omogoča, da se poravna na robu vsebnika glede na lastno začetno stran. V bistvu preglasi vrednost nastavljene vrednosti nadrejenega elementa.
self-end	Samopozicijski	Elementu v postavitvi omogoča, da se poravna na robu vsebnika glede na lastno končno stran, namesto da bi podedoval pozicijsko vrednost vsebnika. V bistvu preglasi vrednost nastavljene vrednosti nadrejenega elementa.
first baseline last baseline	Izhodišče	Poravna vse elemente v skupini (tj. Celice v vrstici) tako, da ujema njihove temeljne črte za poravnavo. Privzeto je, firstče baselinese uporablja samostojno.

Podpora za brskalnik

Ta lastnost je vključena v specifikacijo CSS Model Alignment Model Level 3.

Podpora brskalnika je postala precej široka in v veliki meri uporabna:

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

Reference

• CSS Box Alignment Model Level 3 - Uradna specifikacija, kjer je place-itemslastnost prvotno opredeljena.
• Mozilla Developer Network - dokumentacija ekipe Mozilla.
• Box Alignment Cheat Sheet - oris Rachel Andrew je zelo koristen vir za razumevanje pojmov za poravnavo in njihovih definicij.