Vietas priekšmeti - CSS-triki

place-itemsĪpašums CSS ir saīsinājums no align-itemsun justify-itemsīpašības, apvienojot tos vienā deklarācijā.

Parasti tiek izmantota horizontāla un vertikāla centrēšana ar režģi:

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

Šīs īpašības ir izmantojušas, ieviešot Flexbox un Grid izkārtojumus, taču tās tiek piemērotas arī:

• Bloka līmeņa lodziņi
• Absolūti izvietotas kastes
• Absolūti novietoto lodziņu statiskā pozīcija
• Galda šūnas

Sintakse

Īpašumā tiek pieņemtas divējādas vērtības, pirmā par align-itemsun otra par justify-items. Kā atsvaidzinātājs align-itemsizlīdzina saturu pa vertikālo (kolonnu) asi, savukārt justify-itemspa horizontālo (rindu) asi.

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

Tas ir tas pats, kas rakstīt:

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

Ja tiek sniegta tikai viena vērtība, tā nosaka abas īpašības. Piemēram:

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

... ir tas pats, kas rakstīt šo:

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

Pieņemtās vērtības

Šo īpašumu padara interesantu tas, ka tas izturas atšķirīgi, pamatojoties uz izmantoto kontekstu. Piemēram, dažas vērtības attiecas tikai uz Flexbox un nedarbosies režģa iestatījumā. Turklāt dažas vērtības attiecas uz align-itemsīpašumu, bet citas - uz justify-itemssānu.

Turklāt pašas vērtības var uzskatīt par tādām, kas ietilpst vairākos izlīdzināšanas veidos: kontekstuālā, sadalījuma, pozicionālā (kas kļūst pašpozicionāla, ja maketā tieši tiek piemērota bērna elementam) un bāzes līnijai.

Reičelai Endrjū ir lieliska Box Alignment apkrāptu lapa, kas palīdz ilustrēt vērtību ietekmi.

Vērtība	Tips	Apraksts
auto	Kontekstuāls	Vērtība tiek attiecīgi pielāgota, pamatojoties uz elementa kontekstu. Tas izmanto justify-itemselementa vecāka elementa vērtību. Ja nepastāv vecāks vai tas tiek piemērots elementam, kas atrodas pozīcijā absolute, vērtība kļūst normal.
normal	Kontekstuāls	Notiek izkārtojuma konteksta noklusējuma darbība, kur tā tiek lietota. • Bloka līmeņa izkārtojumi: start • Absolūtais izvietojums: startaizstātajiem absolūtajiem elementiem un stretchvisiem pārējiem • Galda izkārtojums: vērtība tiek ignorēta • Flexbox izkārtojumi: vērtība tiek ignorēta • Režģa izkārtojums: stretchja vien netiek izmantota malu attiecība vai iekšējais izmērs, ja tā darbojas patīkstart
stretch	Izplatīšana	Paplašina elementu līdz konteinera abām malām vertikāli align-itemsun horizontāli justify-items.
start	Pozicionāls	Visi elementi ir izlīdzināti viens pret otru uz konteinera sākuma (kreisās) malas
end	Pozicionāls	Visi elementi ir izlīdzināti viens pret otru konteinera gala (labajā) malā
center	Pozicionāls	Vienumi ir izlīdzināti blakus viens otram pret konteinera centru
left	Pozicionāls	Vienumi ir izlīdzināti blakus konteinera kreisajai pusei. Ja īpašība nav paralēla standarta augšējai, labajai, apakšējai, kreisajai asij, tā rīkojas tāpat end.
right	Pozicionāls	Vienumi ir izlīdzināti blakus konteinera labajai pusei. Ja rekvizīts nav paralēls standarta augšējai, labajai, apakšējai, kreisajai asij, tas rīkojas tāpat start.
flex-start	Pozicionāls	Tikai flexbox vērtība (kas atgriežas start), kur priekšmeti tiek iesaiņoti konteinera sākuma malā.
flex-end	Pozicionāls	Tikai flexbox vērtība (kas atgriežas end), kur preces tiek iesaiņotas konteinera gala malā.
self-start	Pašpozicionāls	Ļauj izkārtojuma vienumam izlīdzināties uz konteinera malas, pamatojoties uz paša sākuma pusi. Būtībā ignorē vecākam noteikto vērtību.
self-end	Pašpozicionāls	Ļauj izkārtojuma vienumam izlīdzināties uz konteinera malas, pamatojoties uz tā gala pusi, nevis mantot konteinera pozicionālo vērtību. Būtībā ignorē vecākam noteikto vērtību.
first baseline last baseline	Bāzes līnija	Izlīdzina visus grupas elementus (ti, šūnas rindā), saskaņojot to izlīdzināšanas bāzes līnijas. Noklusējums ir firsttad, ja baselinetiek izmantota pati.

Pārlūka atbalsts

Šis īpašums ir iekļauts CSS lodziņa izlīdzināšanas modeļa 3. līmeņa specifikācijā.

Pārlūkprogrammas atbalsts ir kļuvis diezgan plašs un lielākoties vienkārši lietojams:

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

Atsauces

• CSS lodziņa izlīdzināšanas modeļa 3. līmenis - oficiālā specifikācija, kurā place-itemsīpašums ir sākotnēji definēts.
• Mozilla Developer Network - Mozilla komandas dokumentācija.
• Kaste Alignment Cheat Sheet - Reičela Endrjū izklāsts ir ļoti noderīgs resurss, lai izprastu izlīdzināšanas noteikumus un to definīcijas.