CSS Éléments de grille - Alignement
Alignement des éléments de grille CSS
Les éléments de grille peuvent être alignés dans leurs cellules respectives en utilisant des propriétés telles que :
-
justify-self- Spécifie l'alignement horizontal dans une cellule -
align-self- Spécifie l'alignement vertical dans une cellule -
place-self- Propriété abrégée pouralign-selfetjustify-self
Ces propriétés peuvent également être appliquées à tous les éléments de grille dans un conteneur en utilisant justify-items et align-items sur le conteneur de grille.
La propriété CSS justify-self
La propriété justify-self est utilisée pour aligner un élément de grille dans sa cellule dans la direction en ligne.
Astuce : Pour les pages en anglais, la direction en ligne est de gauche à droite et la direction de bloc est de haut en bas.
Cette propriété peut avoir l'une des valeurs suivantes :
-
auto(par défaut) -
normal -
stretch -
start -
left -
center -
end -
right
Remarque : Pour que cette propriété ait un effet d'alignement, l'élément de grille doit disposer d'un espace disponible autour de lui dans la direction en ligne.
Exemple
Utilisation de la propriété justify-self :
.item1 {justify-self: right;}
.item6 {justify-self: center;} Résultat :
La propriété CSS align-self
La propriété align-self est utilisée pour aligner un élément de grille dans sa cellule dans la direction de bloc.
Cette propriété peut avoir l'une des valeurs suivantes :
-
auto(par défaut) -
normal -
stretch -
start -
end -
center
Remarque : Pour que cette propriété ait un effet d'alignement, l'élément de grille doit disposer d'un espace disponible autour de lui dans la direction de bloc.
Exemple
Utilisation de la propriété align-self :
.item1 {align-self: start;}
.item6 {align-self: center;} Résultat :
Propriétés d'alignement des éléments de grille CSS
| Propriété | Description |
|---|---|
| align-self | Aligne un élément de grille dans sa cellule dans la direction de bloc |
| justify-self | Aligne un élément de grille dans sa cellule dans la direction en ligne |
| place-self | Propriété abrégée pour align-self et justify-self |