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.

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

Compatibilité des navigateurs

[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

• Manipuler les boîtes flexibles CSS.