Propriété CSS align-self

❮ Précédent Suivant ❯

La propriété CSS align-self est utilisée pour aligner les objets sélectionnés dans la ligne flex actuelle et passer outre aux valeurs de la propriété align-items.

Cette propriété sera ignorée, si la marge verticale de quelqun des objets flex est définie à "auto".

La propriété align-self accepte les mêmes valeurs que la propriété align-items :

auto
stretch
flex-start
flex-end
center
baseline

Valeur initiale	auto
Appliquée à	Objets flex, éléments de la grille, et les boîtes absoulument positionnées.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.alignSelf = "auto";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété align-self</h2>
    <p>Ici align-self pour la première boîte est définie à "flex-start".</p>
  <section>
  <div>Boîte #1</div>
  <div>Boîte #2</div>
  <div>Boîte #3</div>
</section>
  </body>
</html>

Essayez-vous-même!

Voici un exemple, où trois boîtes sont utilisées et la deuxième est spécifiée par la valeur "flex-end".

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété align-self</h2>
    <p>Ici la align-self pour la deuxième boîte est définie à "flex-end".</p>
  <section>
  <div>Boîte #1</div>
  <div>Boîte #2</div>
  <div>Boîte #3</div>
</section>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	L'élément hérite la propriété align-items de son conteneur parent . C'est la valeur initiale.
stretch	L’élément flex s’étende et occupe toute la hauteur disponible..
center	Tous les éléments flex sont positionnés au centre du conteneur.
flex-start	Tous les éléments flex sont positionnés au début du conteneur.
flex-end	Tous les éléments flex sont positionnés à la fin du conteneur.
baseline	Tous les éléments flex sont positionnés sur la ligne de base du conteneur.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de l'élément parent.