CSS place-content egenskap

Definition och användning

place-content Attributet används för flexbox- och grid-layout och är en förkortning av följande attribut:

Om place-content-attributet har två värden:

place-content: start center;
  • Värdet för align-content-attributet är 'start'
  • Värdet för justify-content-attributet är 'center'

Om place-content-attributet bara har ett värde:

place-content: end;
  • Då är värdet för both align-content och justify-content attributen 'end'

Exempel

Exempel 1

Specificera att den elastiska positionen är centrerad på botten av den elastiska behållaren och gör att avståndet mellan elastiska objekt är lika i horisontell riktning:

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

Prova själv

Exempel 2: Grid Layout

Ytterligare utrymme i blockriktningen är jämnt fördelat runt varje gridobjekt, och gridobjekten är centrerade i riktningen inåt:

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

Prova själv

CSS syntax

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

Egenskapsvärde

Värde Beskrivning
normal

Standardvärde. Beroende på layoutkontext.

Ekvivalent med att inte sätta värde på align-content och justify-content.
stretch

Grid: Om storlek inte är satt, sträcker sig gridobjektet för att fylla gridbehållaren.

Flexbox: Om flexobjektet inte har en storlek specificerad på korsaxeln, sträcker det sig på korsaxeln för att fylla flexbehållaren.
start Justera objekten till behållarens början.
end Justera objekten till behållarens slutposition.
center Justera objekten till mitten av behållaren.
space-between Distribuera tillgängligt utrymme jämnt över båda axlarna i behållaren, så att avståndet mellan objekten är lika.
space-around Distribuera tillgänglig utrymme jämnt över båda axlarna i behållaren, så att varje objekts omgivande avstånd är lika.
space-evenly Distribuera objekten jämnt över båda axlarna i behållaren.
overflow-alignment

'safe': Om innehållet överskrider, sätt projektets justering till 'start'.

'unsafe': Behåll justeringsvärdet oförändrat oavsett om innehållet överskrider.
initial Sätt denna egenskap till dess standardvärde. Se till: initial.
inherit Får denna egenskap från sina föräldrelement. Se till: inherit.

Tekniska detaljer

Standardvärde: normal
Arvande: Nej
Animation production: Stöds inte. Se till:Animation relaterade egenskaper.
Version: CSS3
JavaScript syntax: object.style.placeContent="end space-around"

Webbläsarstöd

Talen i tabellen representerar den första webbläsarens version som helt stöder egenskapen.

Chrome Edge Firefox Safari Opera
59.0 79.0 53.0 11.0 46.0

Relaterade sidor

Tutorial:CSS Grid Layout

Tutorial:CSS Flexbox Layout

Referens:CSS align-content egenskap

Referens:CSS justify-content egenskap

Referens:HTML DOM alignContent egenskap