Propriété place-items de CSS

Page précédente place-content
Page suivante place-self

Définition et utilisation

Attribut place-items Cet attribut est utilisé pour le layout en grille et est une abréviation des attributs suivants :

align-items
attribut justify-items

Si l'attribut place-items contient deux valeurs :

place-items: start center;

La valeur de l'attribut align-items est 'start'
La valeur de l'attribut justify-items est 'center'

Si l'attribut place-items ne contient qu'une valeur :

place-items: end;

alors les valeurs des attributs align-items et justify-items sont toutes 'end'

Exemple

Exemple 1

Placer chaque élément <div> dans le début de la direction en ligne et en bloc de sa cellule maillage :

#container {
  place-items: start;
}

Essayer par vous-même

Exemple 2 : Mode d'écriture

Lorsque le conteneur maillage writing-mode Lorsque l'attribut writing-mode est réglé sur 'vertical-rl', la position de fin de la direction de bloc est déplacée du bas à gauche, et la position de fin de la direction en ligne est déplacée du droite en bas :

#container {
  place-items: end;
  writing-mode: vertical-rl;
}

Essayer par vous-même

Exemple 3 : Layout en boîte flexible

attribut justify-items dans un layout en boîte flexible, Attribut place-items L'attribut place-items n'est pas applicable au layout en boîte flexible. Par conséquent, si vous utilisezattribut justify-items La valeur (c'est-à-dire la deuxième valeur) sera ignorée.

#wrapper {
  place-items: stretch end;
}

Essayer par vous-même

Syntaxe CSS

place-items: normal legacy|value|initial|inherit;

Valeur de l'attribut

Valeur	Description
normal legacy	Par défaut. La valeur par défaut de place-items de l'élément. La valeur par défaut de align-items est 'normal', et la valeur par défaut de justify-items est 'legacy'.
baseline	Localiser l'élément sur la ligne de base du conteneur.
center	Aligner l'élément au centre de la cellule maillage.
end	Aligner l'élément à la fin de la cellule maillage.
start	Aligner l'élément au début de la cellule maillage.
stretch	Si la taille de l'élément maillage n'est pas définie, étirer l'élément maillage pour le remplir le conteneur maillage.
initial	Remettre cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherited from its parent element. Voir inherit.

Détails techniques

Valeur par défaut :	normal legacy
Héritabilité :	Non
Création d'animation :	Non supporté. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.placeItems="stretch center"