Vietos daiktai - CSS-gudrybės

place-itemsCSS turtas sutrumpinta už align-itemsir justify-itemssavybės, derinant juos į vieną deklaraciją.

Dažniausiai horizontaliai ir vertikaliai centruojama naudojant tinklelį:

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

Šios savybės tapo naudingos įdiegus „Flexbox“ ir „Grid“ išdėstymus, tačiau jos taip pat taikomos:

• Blokinio lygio langeliai
• Visiškai išdėstytos dėžės
• Statiška absoliučiai išdėstytų dėžučių padėtis
• Stalo langeliai

Sintaksė

Nuosavybė priima dvigubas vertes, pirma už align-itemsir antrą už justify-items. Kaip atnaujinimą, align-itemssulygiuokite turinį išilgai vertikalios (stulpelio) ašies, o justify-itemsišilgai horizontalios (eilutės) ašies.

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

Tai tas pats, kas rašyti:

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

Jei pateikiama tik viena reikšmė, ji nustato abi savybes. Pavyzdžiui:

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

... yra tas pats, kas parašyti:

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

Priimtos vertybės

Ši savybė įdomi tuo, kad ji elgiasi skirtingai, atsižvelgiant į naudojamą kontekstą. Pavyzdžiui, kai kurios reikšmės taikomos tik „Flexbox“ ir neveikia tinklelio nustatymuose. Be to, kai kurios vertės taikomos align-itemsnuosavybei, o kitos - justify-itemsšone.

Be to, galima manyti, kad pačios vertybės patenka į daugybę derinimo tipų: kontekstinę, paskirstymo, pozicinę (kuri tampa savarankiškai, jei makete ji taikoma tiesiogiai vaiko elementui) ir pagrindinę.

Rachel Andrew turi puikų „Box Alignment“ apgaulės lapą, kuris padeda parodyti reikšmių poveikį.

Vertė	Tipas	apibūdinimas
auto	Kontekstinis	Vertė atitinkamai koreguojama atsižvelgiant į elemento kontekstą. Ji naudoja justify-itemselemento pirminio elemento vertę. Jei nėra pirminio elemento arba jis taikomas elementui, kuris yra išdėstytas absolute, tada reikšmė tampa normal.
normal	Kontekstinis	Imasi numatytojo išdėstymo konteksto, kuriame jis taikomas, elgesio. • blokinis išdėstymai: start • Absoliutus-pozicionavimo: startpakeistiems absoliučių elementų ir stretchuž visus kitus • stalo maketai: Vertė ignoruojamas • Lanksčiojo lauko maketai: Vertė ignoruojamas • Grid maketus: stretch, nebent naudojamas aspektas santykis arba vidinis klijavimas, kur ji elgiasi Kaipstart
stretch	Paskirstymas	Išplečia elementą į abu konteinerio kraštus vertikaliai align-itemsir horizontaliai justify-items.
start	Pozicinis	Visi elementai yra sulyginti vienas su kitu ant pradinio (kairiojo) konteinerio krašto
end	Pozicinis	Visi elementai yra sulyginti vienas su kitu ant galinio (dešiniojo) konteinerio krašto
center	Pozicinis	Elementai yra sulygiuoti šalia konteinerio centro
left	Pozicinis	Elementai yra sulygiuoti vienas šalia kito kairiosios talpyklos pusės link. Jei savybė nėra lygiagreti standartinei viršutinei, dešinei, apatinei, kairiai ašiai, ji elgiasi taip, kaip end.
right	Pozicinis	Elementai išlyginti vienas šalia kito, dešinės talpyklos pusės link. Jei savybė nėra lygiagreti standartinei viršutinei, dešinei, apatinei, kairiai ašiai, ji elgiasi taip, kaip start.
flex-start	Pozicinis	Tik „flexbox“ vertė (kuri nukrenta atgal start), kai daiktai supakuoti link pradinio konteinerio krašto.
flex-end	Pozicinis	Tik „flexbox“ vertė (kuri nukrenta atgal end), kai daiktai supakuoti link galinio konteinerio krašto.
self-start	Savęs pozicionavimas	Leidžia išdėstymo elementui lygiuotis į sudėtinio rodinio kraštą, atsižvelgiant į jo pradinę pusę. Iš esmės nepaiso nustatytos tėvų vertės.
self-end	Savęs pozicionavimas	Leidžia maketo elementui lygiuotis į konteinerio kraštą pagal jo galinę pusę, užuot paveldėjus konteinerio pozicinę vertę. Iš esmės nepaiso nustatytos tėvų vertės.
first baseline last baseline	Bazinė linija	Sulygiuojami visi grupės elementai (ty ląstelės eilėje), suderinant jų pagrindines linijas. Numatytasis first, jei baselinenaudojama ant savo.

Naršyklės palaikymas

Ši savybė yra įtraukta į CSS dėžutės derinimo modelio 3 lygio specifikaciją.

Naršyklės palaikymas tapo gana platus ir dažniausiai naudojamas:

• „Edge 79+“ („Chromium“ transliacija)
• „Firefox 45+“
• „Chrome 59+“
• „Safari 11+“

Nuorodos

• 3 lygio CSS langelio derinimo modelis - oficiali specifikacija, kur place-itemsnuosavybė iš pradžių apibrėžta.
• „Mozilla Developer Network“ - „Mozilla“ komandos dokumentai.
• „Box Alignment Cheat Sheet“ - Rachel Andrew metmenys yra labai naudingas šaltinis, norint suvokti derinimo terminus ir jų apibrėžimus.