Propriété CSS align-self

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>

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>

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.

Support de Navigateurs

29.0+
21-28 -webkit-
28.0+ 9.0+
6.1-8.0 -webkit-
12.1+


Trouvez-vous cela utile?

Articles Associées