Proprietà CSS place-content

Pagina precedente perspective-origin
Pagina successiva place-items

Definizione e utilizzo

place-content L'attributo è utilizzato per la layout del contenitore flessibile (flexbox) e della griglia (grid) e è l'abbreviazione dei seguenti attributi:

align-content
justify-content

Se l'attributo place-content ha due valori:

place-content: start center;

Il valore dell'attributo align-content è 'start'
Il valore dell'attributo justify-content è 'center'

Se l'attributo place-content ha solo un valore:

place-content: end;

Allineamento del contenuto e giustificazione del contenuto sono entrambi impostati su 'end'

Esempio

Esempio 1

Allineare la rigidità elastica alla base del contenitore elastico e mantenere un intervallo uguale tra gli elementi elastici in direzione orizzontale:

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

Prova a te stesso

Esempio 2: Layout a griglia

Lo spazio aggiuntivo in direzione di blocco viene distribuito uniformemente intorno a ogni elemento di griglia e gli elementi di griglia sono allineati al centro nella direzione di riga:

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

Prova a te stesso

Sintassi CSS

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

Valore dell'attributo

Valore	Descrizione
normal	Valore predefinito. Dipende dal contesto di layout. Uguale a non impostare valori per align-content e justify-content.
stretch	Griglia: Se non sono impostate dimensioni, gli elementi della griglia si estendono per riempire il contenitore della griglia. Box Flessibile: Se l'elemento flessibile non ha dimensioni specificate sull'asse di intersezione, si estende sull'asse di intersezione per riempire il contenitore flessibile.
start	Allinea gli elementi alla posizione iniziale del contenitore.
end	Allinea gli elementi alla posizione finale del contenitore.
center	Allinea gli elementi al centro del contenitore.
space-between	Distribuisce uniformemente lo spazio disponibile lungo gli due assi del contenitore, rendendo l'intervallo tra gli elementi uguale.
space-around	Distribuisce uniformemente lo spazio disponibile lungo gli due assi del contenitore, rendendo l'intervallo intorno a ogni progetto uguale.
space-evenly	Distribuisce uniformemente gli elementi lungo gli due assi del contenitore.
overflow-alignment	'safe': Se il contenuto fuoriesce, l'allineamento del progetto viene impostato su 'start'. 'unsafe': Il valore di allineamento rimane invariato indipendentemente dal fatto che il contenuto del progetto fuoriesca o meno.
initial	Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit	Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito:	normal
Ereditarietà:	No
Creazione di animazioni:	Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione:	CSS3
Sintassi JavaScript:	object.style.placeContent="end space-around"