Attribut place-content de CSS

Page précédente perspective-origin
Page suivante place-items

Definition and Usage

place-content Properties are used for flexbox and grid layouts and are abbreviations for the following properties:

align-content
justify-content

If the place-content property has two values:

place-content: start center;

The value of the align-content property is 'start'
The value of the justify-content property is 'center'

If the place-content property has only one value:

place-content: end;

Then the values of the align-content and justify-content properties are both 'end'

Instance

Example 1

Align the elastic behavior at the bottom of the elastic container and make the spacing between elastic items equal in the horizontal direction:

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

Essayez-le vous-même

Exemple 2 : Mise en page en grille

L'espace supplémentaire en direction de bloc est réparti uniformément autour de chaque élément de grille et les éléments de grille sont centrés en direction de ligne :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
normal	Valeur par défaut. Dépend du contexte de mise en page. Équivalent à ne pas définir de valeur pour align-content et justify-content.
stretch	Grid : Si la taille n'est pas définie, l'élément de grille est étiré pour remplir le conteneur de grille. Flexbox : Si la taille de l'élément flexible n'est pas spécifiée sur l'axe transversal, il est étiré pour remplir le conteneur flexible sur l'axe transversal.
start	Aligner les éléments à la position de début du conteneur.
end	Aligner les éléments à la position de fin du conteneur.
center	Aligner les éléments au centre du conteneur.
space-between	Répartir uniformément l'espace disponible sur les deux axes du conteneur, de sorte que l'espace entre les éléments soit égal.
space-around	Répartir uniformément l'espace disponible sur les deux axes du conteneur, de sorte que l'espace autour de chaque élément soit égal.
space-evenly	Répartir uniformément les éléments sur les deux axes du conteneur.
overflow-alignment	'safe' : Si le contenu dépasse, l'alignement du projet est réglé sur 'start'. 'unsafe' : La valeur d'alignement reste inchangée, que le contenu du projet dépasse ou non.
initial	Réinitialise cette propriété à sa valeur par défaut. Voir : initial.
inherit	Cette propriété est héritée de l'élément parent. Voir : inherit.

Détails techniques

Valeur par défaut :	normal
Héritabilité :	Non
Création d'animation :	Non pris en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.placeContent="end space-around"