Propriété CSS align-self

La propriété CSS align-self aligne un seul élément flex ou grid le long de l'axe transversal de son conteneur, en remplaçant la valeur align-items définie sur le conteneur.

Alors que align-items aligne tous les éléments du conteneur en même temps, align-self vous permet de cibler un seul élément et de l'aligner différemment. C'est la propriété à utiliser quand un élément doit se démarquer — par exemple, épingler un logo en haut d'une ligne d'en-tête pendant que le reste des éléments reste centré verticalement.

align-self n'a d'effet que lorsque l'élément se trouve dans un conteneur flex, un conteneur grid, ou est positionné en absolu. Sur un élément de type bloc ordinaire, elle n'a aucun effet, c'est pourquoi une valeur comme stretch ne fait rien tant que vous n'avez pas également défini display: flex (ou grid) sur le parent. C'est l'une des propriétés CSS3.

Relation avec align-items

La relation est « conteneur vs. élément » :

align-items est définie sur le conteneur et aligne tous les éléments le long de l'axe transversal.
align-self est définie sur un élément individuel et remplace ce que align-items du conteneur spécifie pour cet élément.

Comme align-self accepte les mêmes valeurs qu'align-items, il suffit d'apprendre les valeurs une seule fois. La valeur par défaut auto signifie simplement « utiliser la valeur align-items du conteneur », donc un élément sans align-self suit le comportement général.

Info

align-self est ignorée lorsque l'élément flex possède une marge verticale auto (la marge automatique prend le dessus et absorbe l'espace libre). Elle n'a également aucun effet sur les cellules de tableau ou sur les boîtes de type bloc autonomes qui ne sont pas des éléments flex/grid.

Valeur initiale	auto
S'applique à	Éléments flex, éléments grid et boîtes positionnées en absolu.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.alignSelf = "auto";

Syntaxe

Syntaxe de la propriété CSS align-self

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

Exemple de la propriété align-self :

Exemple de la propriété CSS align-self avec la valeur flex-start

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(1) {
        align-self: flex-start;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the first box is set to "flex-start".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Essayez vous-même »

Résultat

Le align-items: center du conteneur maintient les boîtes #2 et #3 centrées verticalement, tandis que la boîte #1 — avec align-self: flex-start — remonte en haut, en remplaçant la valeur du conteneur uniquement pour elle-même.

Voici un exemple où trois boîtes sont utilisées et la deuxième est définie avec la valeur « flex-end ».

Exemple de la propriété align-self avec la valeur « flex-end » :

Exemple de la propriété CSS align-self avec la valeur flex-end

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(2) {
        align-self: flex-end;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the second box is set to "flex-end".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Essayez vous-même »

Exemple avec la valeur « stretch » :

Par défaut, un élément flex prend uniquement la hauteur nécessaire à son contenu. Définir align-self: stretch sur un élément fait grandir cet unique élément pour remplir toute la hauteur transversale du conteneur, tandis que les autres conservent leur hauteur naturelle. Pour que stretch fonctionne, la height de l'élément doit être non définie (ou auto).

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(2) {
        align-self: stretch;
        height: auto;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the second box is set to "stretch".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

align-self dans CSS Grid

align-self n'est pas réservée à Flexbox — elle fonctionne de la même manière dans un conteneur grid, en alignant un élément grid le long de l'axe de bloc (colonne) de sa zone de grille :

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center; /* default for every item */
}
.grid .featured {
  align-self: start; /* this one item hugs the top of its cell */
}

Dans grid, les mots-clés start et end sont utilisés à la place de flex-start et flex-end, mais le concept est identique : le conteneur définit un comportement par défaut avec align-items, et align-self le remplace par élément.

Quand utiliser align-self

Un élément à part. La plupart des éléments doivent s'aligner d'une certaine façon, mais un seul élément (une icône, un badge, un appel à l'action) nécessite une position différente.
Épingler en haut ou en bas dans une ligne centrée. Une barre de navigation qui centre verticalement ses liens mais épingle un logo en haut.
Faire s'étirer une seule carte. Dans une rangée de cartes de même hauteur, forcer une seule à remplir la hauteur avec align-self: stretch.

Si tous les éléments ont besoin du même alignement, définissez align-items sur le conteneur — c'est plus propre que de répéter align-self sur chaque enfant.

Valeurs

Valeur	Description	Essayer
auto	L'élément hérite de la propriété align-items de son conteneur parent. C'est la valeur par défaut.	Essayer »
stretch	Étire les éléments pour remplir le conteneur.	Essayer »
center	Les éléments sont placés au centre du conteneur.	Essayer »
flex-start	Les éléments sont placés au début du conteneur.	Essayer »
flex-end	Les éléments sont placés à la fin du conteneur.	Essayer »
baseline	Les éléments sont positionnés sur la ligne de base du conteneur.	Essayer »
initial	La propriété prend sa valeur par défaut.	Essayer »
inherit	La propriété est héritée de l'élément parent.

Exercice

Pratique

Que fait la propriété 'align-self' en CSS ?

Elle permet de remplacer l'alignement par défaut, ou celui spécifié par align-items, pour des éléments flex individuels.Elle est utilisée pour changer la couleur d'arrière-plan d'un élément.Elle crée un nouveau calque sur la page web.Elle aligne les éléments flex le long de la ligne verticale dans leurs conteneurs

Propriétés associées

align-items — la version au niveau du conteneur de cette propriété.
align-content — aligne les rangées d'un conteneur flex multiligne.
justify-content — aligne les éléments le long de l'axe principal.
flex-direction — définit quel axe est l'axe principal (et donc lequel align-self contrôle).
Le guide ultime de Flexbox — comment toutes les propriétés d'alignement flex s'articulent ensemble.