cursusrooster

CSS Reference Manual

CSS-eigenschap

Facultatieve cursus

Aanbevolen cursus:

CodeW3C.com tulpentassen

CSS place-content eigenschap

Vorige pagina perspective-origin
Volgende pagina place-items

Definitie en gebruik

place-content De eigenschappen worden gebruikt voor het flexbox- en grid-lay-out en zijn een verkorting van de volgende eigenschappen:

align-content
justify-content

Als de eigenschap place-content twee waarden heeft:

place-content: start center;

De waarde van de eigenschap align-content is 'start'
De waarde van de eigenschap justify-content is 'center'

Als de eigenschap place-content slechts één waarde heeft:

place-content: end;

De waarden van de eigenschappen align-content en justify-content zijn beide 'end'

Voorbeeld

Voorbeeld 1

Specificer de elastische positie aan de onderkant van de elastische container en zorgt ervoor dat de afstand tussen de elastische items horizontaal gelijkmatig is:

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

Probeer het zelf uit

Voorbeeld 2: Grid Layout

Extra ruimte in de richting van de blokken wordt gelijkmatig verdeeld rond elke grid-item en de grid-items zijn in de richting van de rij centraal uitgelijnd：

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

Probeer het zelf uit

CSS syntaxis

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

Eigenschapswaarde

Waarde	Beschrijving
normal	Standaardwaarde. Afhankelijk van de context van het lay-out. Gelijk aan het niet instellen van de waarden van align-content en justify-content.
stretch	Grid: Als de grootte niet is ingesteld, worden de grid-items uitgerekt om de grid-container te vullen. Flexbox: Als de flexibele items niet worden gespecificeerd in de kruisas, worden ze uitgerekt om de flexbox-container te vullen.
start	Plaats de items aan de beginpositie van de container.
end	Plaats de items aan de eindpositie van de container.
center	Plaats de items in het midden van de container.
space-between	Verspreid de beschikbare ruimte gelijkmatig over de twee assen van het container, zodat de afstand tussen de items gelijk is.
space-around	Verspreid de beschikbare ruimte gelijkmatig over de twee assen van het container, zodat de afstand rond elk item gelijk is.
space-evenly	Verspreid de items gelijkmatig over de twee assen van het container.
overflow-alignment	'safe'：Als de inhoud overloopt, stel de projectie van het item in op 'start'. 'unsafe'：Houd de uitlijnwaarde onveranderd, ongeacht of het inhoudsprojectie overloopt.
initial	Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial。
inherit	Deze eigenschap erft van de ouderlijke element. Raadpleeg inherit。

Technische details

Standaardwaarde：	normal
Inheritantie：	Nee
Animatie maken：	Niet ondersteund. Raadpleeg：Animatiegerelateerde eigenschappen。
Versie：	CSS3
JavaScript syntaxis：	object.style.placeContent="end space-around"