align-self CSS propriété

Définition de la CSS align-self.

La propriété d'alignement CSS align-self permet de spécifier l'alignement d'un élément flexible ou grille Css spécifique par rapport à la hauteur de ligne (ou de largeur de la colonne) d'un conteneur Flexbox Css ou Grid Css.

Sens de l'alignement align-self Dans un conteneur Flexbox Css, l'alignement se fait par rapport à l'axe transversal.
Dans un conteneur Grid Css, l'alignement se fait verticalement par rapport à la hauteur de la ligne.

Pour redéfinir globalement l'alignement des éléments flexible Css entre eux, utilisez la propriété Css align-items.
Vous pouvez faire des tests de paramétrage dans le générateur de code Css de Flexbox.

Exemple de syntaxe CSS align-self :

align-self : auto;
align-self : flex-start;
align-self : flex-end; 
align-self : center;
align-self : baseline;
align-self : stretch;

La propriété de feuille de style align-self CSS peut prendre la valeur de :

auto : c'est la valeur de la propriété Css align-items qui est appliquée. Valeur par défaut.
flex-start : le "coin de début" (margin incluses) de l'élément flexible est collé sur le "début transversal de la ligne".
flex-end : le "coin de fin" (margin incluses) de l'élément flexible est collé sur sur la "fin transversal" de la ligne.
center : l'élément flexible (margin incluses) est centré par rapport à "l'axe transversal" de la ligne ou de la colonne.
baseline : l'élément flexible s'aligne sur leur baseline afin de partager la même ligne de base (baseline) sur sa ligne.
stretch : l'élément flexible qui respecte les règles d'application est étiré afin que sa taille (margin incluses) prenne toute la hauteur de sa ligne* tout en respectant les contraintes imposées par min-height, max-height et min-width, max-width.

*) ou colonne suivant la valeur de flex-direction.

Exemple de code align-self CSS

Conditions d'application de la CSS align-self.

La propriété de feuille de style align-self CSS est applicable sur l'ensemble des balises HTML ou XHTML, si elles sont des éléments "flexibles" d'un conteneur Flexbox CSS (display:[inline-]flex) ou des éléments grille CSS d'un conteneur Grid CSS(display:[inline-]grid).

Héritage des valeurs Css de align-self.

Les balises filles HTML ou XHTML n'héritent pas de la propriété de feuille de style align-self

Règles de syntaxes CSS pour align-self.

Le cas de margin à la valeur auto

La propriété Css align-self est ignorée, si l'élément flexible Css a des margin sur l'axe transversal à la valeur auto.
Pour un conteneur Flexbox Css de type flex-direction:row ou pour un conteneur Grid Css:

margin-bottom ou margin-top a la valeur auto, align-self est ignorée.

Pour un conteneur Flexbox Css de type flex-direction:colunm

margin-left ou margin-right a la valeur auto, align-self est ignorée.

Qu'est ce qu'une ligne ou colonne de flexibles ?

Qu'est ce qu'une ligne de flexibles Les éléments flexibles sont regroupés dans un conteneur virtuel que l'on nommera ligne de flexibles ou colonne de flexibles. Lors d'un retour automatique, les éléments flexibles qui vont à la ligne ou à la colonne forment une nouvelle ligne de flexibles ou colonne de flexibles.

Compatibilités navigateurs de la propriété align-self

Détails des versions de la CSS align-self: Propriété align-self est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS align-self: Propriété CSS align-self est compatible sous une forme préfixée avec Chrome 21; Propriété CSS align-self est compatible à partir de Chrome 29; Propriété CSS align-self est compatible à partir de Firefox 22; Propriété CSS align-self est compatible sous une forme préfixée avec Internet Explorer 10; Propriété CSS align-self est compatible à partir de Internet Explorer 11; Propriété CSS align-self est compatible à partir de Opera 12; Propriété CSS align-self est compatible sous une forme préfixée avec Safari 7; Propriété CSS align-self est compatible à partir de Safari 9

Propriétés CSS préfixées de align-self

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété align-self CSS :

-ms-flex-item-align

Pour rendre compatible la propriété align-self CSS avec le plus grand nombre de navigateurs, vous devez utiliser les versions préfixées suivante :

Versions préfixées de align-self :

-ms-flex-item-align : stretch; /* baseline | center | end | start | stretch */
-webkit-align-self : stretch;
align-self : stretch;

Votre avis sur la définition align-self en CSS

Votez pour la définition CSS `align-self`

Votes: 5 / 5 - 1 vote
Cliquez sur une étoile pour voter.

Définitions annexes à la Css align-self

Définitions CSS annexes align-self

align-items: La propriété d'alignement CSS ALIGN-ITEMS permet de spécifier globalement l'alignement "vertical" des éléments flexibles ou grille Css par rapport à l...[ align-items ]
margin: La propriété de Marge CSS MARGIN permet de spécifier individuellement ou globalement l'espace entre la bordure d'un élément HTML ou XHTML et la bordur...[ margin ]
max-height: La propriété de Hauteur CSS MAX-HEIGHT permet de spécifier la hauteur maximale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d...[ max-height ]
max-width: La propriété de Longueur CSS MAX-WIDTH permet de spécifier la longueur maximale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple ...[ max-width ]
min-height: La propriété de Hauteur CSS MIN-HEIGHT permet de spécifier la hauteur minimale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d...[ min-height ]
min-width: La propriété de Longueur CSS MIN-WIDTH permet de spécifier la longueur minimale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple ...[ min-width ]