CSS place-content ominaisuus

Edellinen sivu perspective-origin
Seuraava sivu place-items

Määrittely ja käyttö

place-content Ominaisuudet käytetään joustavissa ruudukkoissa (flexbox) ja ruudukkojen (grid) asetteluissa, ja ne ovat seuraavien ominaisuuksien lyhenteitä:

align-content
justify-content

Jos place-content-ominaisuudella on kaksi arvoa:

place-content: start center;

align-content-ominaisuuksien arvo on 'start'
justify-content-ominaisuuksien arvo on 'center'

Jos place-content-ominaisuudella on vain yksi arvo:

place-content: end;

Silloin align-content- ja justify-content-ominaisuuksien arvot ovat 'end'

Esimerkki

Esimerkki 1

Määritä joustavuusala sijoittumaan joustavan konttorin pohjaan ja tasapainottaakseen horisontaalisesti joustavien elementtien välistä etäisyyttä:

#container {
  display: flex;
  place-content: end space-between;
}

Kokeile itse

Esimerkki 2: Ruudukkoasetus

Ylimääräinen tila jaetaan tasaisesti jokaisen ruudukkoobjektin ympärille, ja ruudukkoobjektit ovat riveissä keskellä tasaisesti:

#container {
  display: grid;
  place-content: space-around center;
}

Kokeile itse

CSS syntaksi

place-content: normal|value|initial|inherit;

Ominaisuusarvo

Arvo	Kuvaus
normal	Oletusarvo. Riippuu asetteluympäristyksestä. On sama kuin ei aseteta align-content ja justify-content ominaisuuksia.
stretch	Ruudukko: Jos kohteita ei ole määritetty kokoon, ne venyvät täyttääkseen ruudukon kontin. Joustava laatikkotyökalu: Jos joustava projekti ei ole määritetty leveydeltään tai korkeudeltaan ristikkäisessä akselissa, se venyy täyttääkseen joustavan kontin.
start	Kohdistaa projektit容器的开始位置.
end	Kohdistaa projektit容器的结束位置.
center	Kohdistaa projektit容器的中心位置.
space-between	Jakaa käytettävissä olevan tilan tasaisesti容器的两个轴上，jotta projektien välillä on tasainen etäisyys.
space-around	Jakaa käytettävissä olevan tilan tasaisesti容器的两个轴上，jotta jokaisen projektin ympärillä on tasainen etäisyys.
space-evenly	Jakaa kohteet tasaisesti容器的两个轴上
overflow-alignment	'safe': Jos sisältö ylivarannut, aseta projektin kohdistus 'start'. 'unsafe': Pidä kohdistusarvo muuttumattomana riippumatta siitä, onko sisältö ylivarannut.
initial	Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit	Perii tämän ominaisuuden vanhemmalta elementiltä. Katso: inherit.

Tekninen tarkistus

Oletusarvo:	normal
Perinnäisyys:	Ei
Animaation luominen:	Ei tuettu. Katso:Animaatiot.
Versio:	CSS3
JavaScript syntaksi:	object.style.placeContent="end space-around"