Propriété align-self de CSS

La propriété CSS align-self aligne les éléments sélectionnés à l'intérieur de la ligne flex actuelle et remplace les valeurs de align-items.

La propriété align-self fait partie des propriétés CSS3.

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

auto
stretch
flex-start
flex-end
center
baseline

INFO

Cette propriété sera ignorée si une marge verticale d'un élément flex est définie sur "auto". La propriété align-self ne s'applique pas aux cellules de tableau ni aux boîtes de niveau bloc.

Valeur initiale	auto
S'applique à	Éléments flex, éléments de grille et boîtes positionnées de manière absolue.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.alignSelf = "auto";

Syntaxe

Syntaxe de la propriété CSS align-self

css

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

html

<!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>

Try it Yourself »

Résultat

CSS align-self Property

Voici un exemple où trois boîtes sont utilisées et la seconde 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

html

<!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>

Try it Yourself »

Valeurs

Valeur	Description	Essayer »
auto	L'élément hérite de la propriété align-items de son conteneur parent. Il s'agit de la valeur par défaut.	Essayer »
stretch	Étire les éléments pour qu'ils s'adaptent au 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	Définit la valeur par défaut de la propriété.	Essayer »
inherit	Hérite la propriété de son élément parent.

Practice

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 de fond d'un élément.Elle crée une nouvelle couche sur la page web.Elle aligne les éléments flex le long de l'axe vertical au sein de leurs conteneurs

Propriété align-self de CSS ​

Syntaxe ​

Exemple de la propriété align-self : ​

Résultat ​

Exemple de la propriété align-self avec la valeur "flex-end" : ​

Valeurs ​