align-self

La propriété align-self détermine comment aligner les éléments flexibles sur une même rangée. Elle surcharge la valeur de la propriété align-items. Si la marge perpendiculaire à la direction d'un des éléments flexibles vaut auto, la valeur de align-self sera ignorée.

Valeur initialeauto
Applicabilitééléments flexibles, y compris les pseudo-éléments intégrés dans le flux
Héritéenon
Médiavisuel
Valeur calculéeauto sera calculé comme auto pour les éléments positionnés de façon absolue, sera calculé comme align-items sur le parent (excepté les mots-clés historiques utilisés) de toutes les autres boîtes ou comme start si la boîte n'a pas de parent. Son comportement dépend du modèle de disposition, décrit dans justify-self, sinon ce sera la valeur spécifiée.
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Pour plus d'informations et de détails sur les différentes propriétés dans le modèle des boîtes flexibles (flexbox), voir Manipuler les boîtes flexibles CSS.

Syntaxe

/* Valeurs avec un mot-clé */
align-self: auto;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;

/* Valeurs globales */
align-self: inherit;
align-self: initial;
align-self: unset;

Valeurs

auto
La valeur calculée sera la valeur de l'élément parent pour align-items ou stretch si l'élément ne possède pas de parent (:'().
flex-start
Le bord de la marge du début de l'élément flexible, dans le sens perpendiculaire à la rangée, est aligné avec le bord de la rangée. Autrement dit, si la rangée est une ligne : cela correspondra à un alignement vers le haut ; si c'est une colonne, cela correspondra à un alignement vers la gauche.
flex-end
Le bord de la marge de fin de l'élément flexible, dans le sens perpendiculaire à la rangée, est aligné avec le bord de la rangée vers la fin. Autrement dit, si la rangée est une ligne : cela correspondra à un alignement vers le bas ; si c'est une colonne, cela correspondra à un alignement vers la droite.
center
La boîte de marge de l'élément flexible est centrée sur l'axe orthogonal à la direction de la rangée. Si la taille de l'élément est plus grande que celle de la rangée dans cette direction, l'élément dépassera d'autant de chaque côté.
baseline
Tous les éléments flexibles d'une rangée sont alignés afin que leurs lignes de bases soient alignées entre elle. L'élément pour lequel on a la plus grande distance entre le bord de la marge et la ligne de base est aligné avec le bord de la rangée (si la rangée est horizontale, il sera aligné en haut, si elle est verticale (colonne), il sera aligné à gauche).
stretch
Les éléments flexibles sont étirés afin que la taille de la boîte de marge, dans l'axe orthogonal à la direction de la rangée, soit la même que la taille de la rangée tout en respectant les contraintes de largeur ou de hauteur.

Syntaxe formelle

auto | flex-start | flex-end | center | baseline | stretch

Exemples

CSS

.flex-container {
  height: 250px;
  display: flex;
}

.element-flex {
  background: palegreen;
  width: 100px;
  padding: 5px;
  margin: 5px;
  line-height: 50px;
  font-size: 2em;
} 

.center {
  -webkit-align-self: center;
  align-self: center;
}

.baseline {
  -webkit-align-self: baseline;
  align-self: baseline;
}

.stretch {
  -webkit-align-self: stretch;
  align-self: stretch;
}

HTML

<div class="flex-container">
  <p class="element-flex center">Milieu</p>
  <p class="element-flex baseline">Base</p>
  <p class="element-flex stretch">Étiré</p>
</div>

Résultat

Spécifications

Spécification État Commentaires
CSS Box Alignment Module
La définition de 'align-self' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 21.0-webkit
36.0
20.0 (20.0) [1] (Oui) 11.0 12.10 Pas de support
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple ? ? ? (Oui) Pas de support 12.10 Pas de support

[1] Jusqu'à Firefox 27, Gecko ne gère que les boîtes flexibles sur une seule ligne ou un seule colonne. Pour Firefox 18 et 19, il est nécessaire d'activer la préférence layout.css.flexbox.enabled avec la valeur true dans about:config.
En plus de la version non préfixée, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,