La align-selfpropriété est une sous-propriété du module Disposition de boîte flexible.
Il permet de remplacer la align-itemsvaleur d'éléments flexibles spécifiques.
La align-selfpropriété accepte les 5 mêmes valeurs que align-items:
flex-start: le bord de la marge de départ croisé de l'élément est placé sur la ligne de départ croiséflex-end: le bord de la marge transversale de l'élément est placé sur la ligne transversalecenter: l'élément est centré sur l'axe transversalbaseline: les éléments sont alignés tels que leur ligne de base est alignéestretch(par défaut): étirer pour remplir le conteneur (toujours respecter min-width / max-width)
Syntaxe
align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )Démo
La démo suivante montre comment un élément peut s'aligner dans le conteneur flex en fonction de la align-selfvaleur:
- Le premier élément est réglé sur
flex-start - Le 2ème élément est réglé sur
flex-end - Le troisième élément est réglé sur
center - Le 4ème élément est réglé sur
baseline - Le 5ème élément est réglé sur
stretch
Voir la démo Pen align-self par CSS-Tricks (@ css-tricks) sur CodePen.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
Pour plus d'informations sur la façon de mélanger les syntaxes afin d'obtenir le meilleur support du navigateur, veuillez vous référer à cet article (CSS-Tricks) ou à cet article (DevOpera).