Paikkakunnat - CSS-temppuja

place-itemsOmaisuus CSS on vain lyhenne align-itemsja justify-itemsominaisuudet, yhdistämällä ne yhdeksi julistuksen.

Yleinen käyttö on vaaka- ja pystysuuntainen keskittäminen ruudukon kanssa:

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

Näitä ominaisuuksia on hyödynnetty Flexbox- ja Grid-asettelujen käyttöönoton myötä, mutta niitä käytetään myös:

• Lohkotason laatikot
• Ehdottomasti sijoitetut laatikot
• Absoluuttisesti sijoitettujen laatikoiden staattinen sijainti
• Taulukon solut

Syntaksi

Omaisuus hyväksyy kaksoisarvot, ensimmäinen align-itemsja toinen justify-items. Päivityksenä align-itemstasaa sisältö pystysuoraan (sarake) akseliin, kun taas justify-itemsvaaka (rivi) -akseliin.

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

Tämä on sama kuin kirjoittaminen:

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

Jos annetaan vain yksi arvo, se asettaa molemmat ominaisuudet. Esimerkiksi tämä:

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

… On sama kuin tämän kirjoittaminen:

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

Hyväksytyt arvot

Tämän ominaisuuden tekee mielenkiintoiseksi se, että se käyttäytyy eri tavalla käytetyn kontekstin perusteella. Jotkut arvot koskevat esimerkiksi vain Flexboxia, eivätkä ne toimi Ruudukko-asetuksissa. Jotkin arvot koskevat myös align-itemsomaisuutta, kun taas toiset justify-itemspuolta.

Itse arvojen voidaan ajatella kuuluvan useisiin kohdistustyyppeihin: asiayhteyteen, jakautumiseen, sijaintiin (josta tulee itseasento, jos sitä käytetään suoraan ulkoasun lapsielementtiin) ja lähtötasoon.

Rachel Andrewlla on erinomainen Box Alignment -huijausarkki, joka auttaa havainnollistamaan arvojen vaikutusta.

Arvo	Tyyppi	Kuvaus
auto	Asiayhteyteen	Arvo muuttuu vastaavasti elementin kontekstin perusteella. Se käyttää justify-itemselementin pääelementin arvoa. Jos vanhempaa ei ole tai sitä käytetään elementtiin, jonka kohdalla on absolute, arvo muuttuu normal.
normal	Asiayhteyteen	Ottaa asettelukontekstin oletuskäyttäytymisen, jossa sitä käytetään. • Block-taso kaavoista: start • Absoluuttinen asemointi: startsillä korvataan absoluuttinen elementtejä ja stretchkaikille muille • Taulukko kaavoista: arvo jätetään huomiotta, • flexboxiin kaavoista: arvo jätetään huomiotta, • Grid kaavoista: stretch, ellei sivusuhde tai sisäinen liimaus käytetään siellä, missä se käyttäytyy Kutenstart
stretch	Jakelu	Laajentaa elementin säiliön molempiin reunoihin pystysuunnassa align-itemsja vaakasuunnassa justify-items.
start	Paikallinen	Kaikki elementit on kohdistettu toisiaan vastaan ​​astian aloitusreunassa (vasemmalla)
end	Paikallinen	Kaikki elementit on kohdistettu toisiaan vastaan ​​säiliön loppupuolella (oikealla)
center	Paikallinen	Kohteet on kohdistettu vierekkäin kohti astian keskustaa
left	Paikallinen	Kohteet on kohdistettu vierekkäin kohti säiliön vasenta puolta. Jos ominaisuus ei ole yhdensuuntainen tavallisen ylä-, oikean-, ala- ja vasemman akselin kanssa, se käyttäytyy samalla tavalla end.
right	Paikallinen	Kohteet on kohdistettu vierekkäin kohti astian oikeaa puolta. Jos ominaisuus ei ole yhdensuuntainen tavallisen ylä-, oikean-, ala- ja vasemman akselin kanssa, se käyttäytyy samalla tavalla start.
flex-start	Paikallinen	Vain flexbox-arvo (joka putoaa takaisin start), johon tavarat pakataan kohti astian alkureunaa.
flex-end	Paikallinen	Vain flexbox-arvo (joka palaa takaisin end), johon tavarat pakataan kohti säiliön loppureunaa.
self-start	Itseasento	Antaa asettelun kohteen kohdistua säiliön reunaan oman aloitussivunsa perusteella. Periaatteessa ohittaa asetetun arvon ylätasolla.
self-end	Itseasento	Antaa asettelun kohteen kohdistua säiliön reunaan sen oman loppupuolen perusteella sen sijaan, että periisi kontin sijainti-arvon. Periaatteessa ohittaa asetetun arvon ylätasolla.
first baseline last baseline	Lähtötaso	Tasaa kaikki ryhmän elementit (ts. Rivin solut) sovittamalla niiden kohdistuksen perusviivat. Oletusarvo on, firstjos baselinesitä käytetään yksin.

Selaimen tuki

Tämä ominaisuus sisältyy CSS Box Alignment Model Level 3 -määritykseen.

Selaintuki on kasvanut melko laajaksi ja suurelta osin vain käyttökelpoiseksi:

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

Viitteet

• CSS Box Alignment Model Level 3 - virallinen määritys, jossa place-itemsominaisuus määritetään alun perin.
• Mozilla Developer Network - Mozilla-tiimin ohjeet.
• Box Alignment -huijausarkki - Rachel Andrew's -hahmotelma on erittäin hyödyllinen resurssi kohdistustermien ja niiden määritelmien ymmärtämiseksi.