La place-itemspropriété en CSS est un raccourci pour les propriétés align-itemset justify-items, en les combinant en une seule déclaration.
Un usage courant consiste à effectuer un centrage horizontal et vertical avec Grid:
.center-inside-of-me ( display: grid; place-items: center; )Ces propriétés ont été utilisées avec l'introduction des dispositions Flexbox et Grid, mais sont également appliquées à:
- Boîtes de niveau bloc
- Boîtes parfaitement positionnées
- Position statique des boîtes positionnées de manière absolue
- Cellules de tableau
Syntaxe
La propriété accepte des valeurs doubles, la première pour align-itemset la seconde pour justify-items. Pour rappel, align-itemsaligne le contenu le long de l'axe vertical (colonne) tandis que l' justify-itemsaligne le long de l'axe horizontal (ligne).
.item ( display: grid; place-items: start center; )C'est la même chose que d'écrire:
.item ( display: grid; align-items: start; justify-items: center; )Si une seule valeur est fournie, il définit les deux propriétés. Par exemple, ceci:
.item ( display: grid; place-items: start; )… Revient à écrire ceci:
.item ( display: grid; align-items: start; justify-items: start; )Valeurs acceptées
Ce qui rend cette propriété intéressante, c'est qu'elle se comporte différemment en fonction du contexte dans lequel elle est utilisée. Par exemple, certaines valeurs s'appliquent uniquement à Flexbox et ne fonctionneront pas dans un paramètre Grid. En outre, certaines valeurs s'appliquent à la align-itemspropriété alors que d'autres s'appliquent au justify-itemscôté.
En outre, les valeurs elles-mêmes peuvent être considérées comme relevant d'un certain nombre de types d'alignement: contextuel, distribution, positionnel (qui devient auto-positionnel s'il est directement appliqué à un élément enfant dans la mise en page) et ligne de base.
Rachel Andrew a une excellente aide-mémoire sur l'alignement des boîtes qui aide à illustrer l'effet des valeurs.
| Évaluer | Taper | Description |
|---|---|---|
auto | Contextuel | La valeur s'ajuste en conséquence en fonction du contexte de l'élément. Il utilise la justify-itemsvaleur de l'élément parent de l'élément. Si le parent n'existe pas ou s'il est appliqué à un élément positionné avec absolute, alors la valeur devient normal. |
normal | Contextuel | Prend le comportement par défaut du contexte de mise en page où il est appliqué. • mises en page au niveau bloc: start• absolu de positionnement: startpour les éléments absolus remplacés et stretchpour tous les autresde layouts de table: La valeur est ignorée • dispositions ēno: La valeur est ignorée • Disposition de la grille: stretch, à moins que l' on utilise un rapport d'aspect ou le dimensionnement intrinsèque où il se comporte aimerstart |
stretch | Distribution | Développe l'élément sur les deux bords du conteneur verticalement pour align-itemset horizontalement pour justify-items. |
start | Positionnel | Tous les éléments sont alignés les uns contre les autres sur le bord de départ (gauche) du conteneur |
end | Positionnel | Tous les éléments sont alignés les uns contre les autres sur le bord final (droit) du conteneur |
center | Positionnel | Les articles sont alignés les uns à côté des autres vers le centre du conteneur |
left | Positionnel | Les éléments sont alignés les uns à côté des autres vers le côté gauche du conteneur. Si la propriété n'est pas parallèle à un axe standard haut, droit, bas, gauche, alors elle se comporte comme end. |
right | Positionnel | Les éléments sont alignés les uns à côté des autres vers le côté droit du conteneur. Si la propriété n'est pas parallèle à un axe standard haut, droit, bas, gauche, alors elle se comporte comme start. |
flex-start | Positionnel | Une valeur Flexbox uniquement (qui revient à start) où les éléments sont emballés vers le bord de départ du conteneur. |
flex-end | Positionnel | Une valeur Flexbox uniquement (qui revient à end) où les éléments sont emballés vers le bord final du conteneur. |
self-start | Auto-positionnel | Permet à un élément d'une mise en page de s'aligner sur le bord du conteneur en fonction de son propre côté de départ. Remplace essentiellement la valeur définie sur le parent. |
self-end | Auto-positionnel | Permet à un élément d'une mise en page de s'aligner sur le bord du conteneur en fonction de son propre côté de fin au lieu d'hériter de la valeur de position du conteneur. Remplace essentiellement la valeur définie sur le parent. |
first baselinelast baseline | Ligne de base | Aligne tous les éléments d'un groupe (c'est-à-dire les cellules d'une ligne) en faisant correspondre leurs lignes de base d'alignement. La valeur par défaut est firstif baselineest utilisé seul. |
Prise en charge du navigateur
Cette propriété est incluse dans la spécification CSS Box Alignment Model Level 3.
La prise en charge des navigateurs est devenue assez large et largement utilisable:
- Edge 79+ (transision post Chromium)
- Firefox 45+
- Chrome 59+
- Safari 11+
Les références
- CSS Box Alignment Model Level 3 - La spécification officielle où la
place-itemspropriété est initialement définie. - Mozilla Developer Network - La documentation de l'équipe Mozilla.
- Aide-mémoire sur l'alignement des boîtes - Le plan de Rachel Andrew est une ressource très utile pour comprendre les termes d'alignement et leurs définitions.