align-self |
Aligné soi-même |
|---|---|
| CSS3 |
Syntaxe
| align-self: auto|baseline|center|flex-start|flex-end|inherit|initial|stretch; |
Paramètres
| Paramètre | Description |
|---|---|
| auto | Ce paramètre permet d'indiquer que l'item doit hérité de l'alignement de parent. C'est la valeur par défaut. |
| baseline | Ce paramètre permet d'indiquer que l'item doit être situé à la ligne de base du conteneur, soit généralement en haut. |
| center | Ce paramètre permet d'indiquer que l'item doit être situé au centre du conteneur. |
| flex-end | Ce paramètre permet d'indiquer que l'item doit être situé en bas du conteneur. |
| flex-start | Ce paramètre permet d'indiquer que l'item doit être situé en haut du conteneur. |
| inherit | Ce paramètre permet d'indiquer qu'il faut hériter des propriétés du parent de cette propriété. |
| initial | Ce paramètre permet d'indiquer qu'il faut utiliser la valeur par défaut de cette propriété. |
| stretch | Ce paramètre permet d'indiquer que l'item doit s'étirer afin de prendre l'espace restant. |
Description
Cette propriété permet d'indiquer l'alignement pour l'item sélectionné à l'intérieur d'un conteneur flexible.
Remarques
- Alignement individuel des éléments : La propriété align-self permet de définir l'alignement d'un élément spécifique dans un conteneur flexbox ou grid, indépendamment de l'alignement global défini par align-items. Cela permet un contrôle précis pour ajuster individuellement un ou plusieurs éléments.
- Héritage de align-items par défaut : Par défaut, la valeur de align-self est auto, ce qui signifie que l'élément hérite de la valeur définie par align-items dans le conteneur parent. Si aucun alignement global n'est défini, la valeur par défaut devient stretch.
- Options flexibles d'alignement : align-self offre des valeurs similaires à celles de align-items, comme flex-start, flex-end, center, baseline et stretch. Ces valeurs permettent d'aligner l'élément en haut, en bas, au centre, sur la ligne de base du texte ou de l'étirer pour occuper tout l'espace disponible dans l'axe transversal.
- Priorité sur align-items : Si align-self est défini sur un élément, il remplace la valeur globale de align-items pour cet élément spécifique. Cela permet de créer des exceptions sans modifier l'alignement des autres éléments du conteneur.
- Utilisation dans les conteneurs flex et grid : La propriété align-self fonctionne à la fois dans les conteneurs flexbox et grid. Dans un conteneur grid, elle ajuste l'alignement des éléments dans l'axe de la grille, offrant une grande flexibilité dans la disposition des cellules.
- Pas d'effet sur les éléments d'une seule ligne : Si le conteneur n'a qu'une seule ligne et que l'élément occupe toute la hauteur (ou largeur en écriture verticale), align-self peut ne pas produire d'effet visible. Dans ce cas, l'utilisation de marges ou d'autres propriétés CSS peut être nécessaire pour ajuster l'apparence.
- Idéal pour des ajustements spécifiques : align-self est utile pour les cas où un ou plusieurs éléments nécessitent un alignement différent des autres. Par exemple, dans une barre de navigation, on peut centrer la plupart des liens, tout en alignant un logo ou un bouton sur le haut ou le bas.
- Compatibilité des navigateurs Web : La propriété align-self est largement prise en charge dans les navigateurs modernes. Cependant, pour garantir une compatibilité optimale avec les anciennes versions d'Internet Explorer, il peut être nécessaire d'utiliser des solutions de repli ou des polyfills.
Dernière mise à jour : Dimanche, le 20 décembre 2015