La propriété raccourcie place-items définit les valeurs utilisées pour les propriétés align-items et justify-items. La première valeur fournie est utilisée pour align-items et la seconde est utilisée pour justify-items. S'il n'y a pas de seconde valeur fournie, c'est la première qui est reprise pour justify-items.

Syntaxe

/* Valeurs avec un mot-clé */ 
place-items: auto center; 
place-items: normal start; 

/* Alignement géométrique */ 
place-items: center normal; 
place-items: start auto; 
place-items: end normal; 
place-items: self-start auto; 
place-items: self-end normal; 
place-items: flex-start auto; 
place-items: flex-end normal; 
place-items: left auto; 
place-items: right normal; 

/* Alignement par rapport à la ligne de base */ 
place-items: baseline normal; 
place-items: first baseline auto; 
place-items: last baseline normal; 
place-items: stretch auto; 

/* Valeurs globales */ 
place-items: inherit; 
place-items: initial; 
place-items: unset;

Valeurs

auto
La valeur utilisée est celle de justiy-items pour l'élément parent sauf si l'élément n'a pas de parent ou qu'il est positionné de façon absolue auquel cas auto sera synonyme de normal.
normal
L'effet de ce mot-clé depend du mode de disposition utilisé :
  • Pour les dispositions en bloc, ce mot-clé est synonyme de start.
  • Pour les dispositions absolues, ce mot-clé se comporte comme start pour les éléments remplacés ou comme stretch pour tous les autres éléments.
  • Pour les cellules de tableaux, ce mot-clé n'a pas de sens et cette propriété est ignorée.
  • Pour les dispositions utilisant des boîtes flexibles, ce mot-clé n'a pas de sens et cette propriété est ignorée.
  • Pour les dispositions en grille, ce mot-clé se comporte comme stretch sauf pour les éléments qui ont des dimensions intrinsèques ou des contraintes de ratio, auquel cas cette valeur est synonyme de start.
start
L'élément est aligné au début de l'axe dans la direction correspondante.
end
L'élément est aligné à la fin de l'axe dans la direction correspondante.
flex-start
Les éléments sont regroupés vers le début du conteneur flexible pour l'axe correspondant.
Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à start.
flex-end
Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe correspondant.
Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à end.
self-start
Les éléments sont alignés sur le bord de leur boîte vers le début de l'axe correspondant.
self-end
Les éléments sont alignés sur le bord de leur boîte vers la fin de l'axe correspondant.
center
L'élément est centré le long de l'axe correspondant.
left
L'élément est aligné sur le bord gauche du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme start.
right
L'élément est aligné sur le bord droit du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme start.
baseline
first baseline

last baseline
Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.
Si first baseline n'est pas prise en charge, la valeur correspondra à start, si last baseline n'est pas prise en charge, la valeur correspondra à end.
stretch
Si la somme des tailles des éléments est inférieure à la taille du conteneur, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par max-height/max-width (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.

Exemples

CSS

#container {
  height:200px;
  width: 240px;
  place-items: center; /* Cette valeur peut être modifiée dans l'exemple */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

Résultat

Spécifications

Spécification État Commentaires
CSS Box Alignment Module
La définition de 'place-items' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 59 ? 45.0 (45.0) ? ? ?
Fonctionnalité Webview Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome pour Android
Support simple 59 ? 45.0 (45.0) ? ? ? 59

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,