Attribut ALIGN-SELF

Rôle

L’ attribut align-items (défini dans le conteneur parent) permet de gérer l’alignement de tous les éléments enfants. Vous pouvez, pour un enfant, appliquer un alignement particulier avec l’attribut align-self qui reprend les mêmes valeurs que align-items

Le flex-container correspond à n’importe quel bloc qui contient des enfants (flex-item) sur lequel on va appliquer le modèle de boîte flexible (display:flex)

 Note : voir notre tutoriel sur le modèle flex-box

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.alignSelf

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

.rowflex{
  width : 300px;
  height: 150px;
  align-items: flex-start;
  border : thin solid silver;  
  display : flex;
  align-content: space-around;
}
.rowflex div{
  padding: 5px;
  width: 100px;
}
.rowflex .milieu{
  background-color: orange;
  align-self: flex-end;
}
.rowflex .gauche{
  background-color: pink;
}
.rowflex .droite{
  background-color: silver;
}

– Le code HTML

<div class="rowflex">
  <div class="gauche">gauche</div>
  <div class="milieu">milieu</div>
  <div class="droite">droite</div>
</div>

Résultat

Remarquez l’alignement spécifique du bloc orange vers le bas

Compatibilité

navigateur-chrome 21.0(-webkit-) navigateur-firefox 18.0(-moz-) navigateur-ie 10.0(-ms-) navigateur-safari 6.1(-webkit-) navigateur-opera 12.1

Valeurs

Les différentes valeurs de l’attribut align-self sont:

flex-start
Au début de l’axe
Syntaxe :
align-items : flex-start

flex-end
A la fin de l’axe
Syntaxe :
align-items : flex-end

center
Au milieu de l’axe
Syntaxe :
align-items : center

strech
Elément étiré dans l’espace disponible
Syntaxe :
align-items : strech

initial
Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
align-items : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
align-items : inherit

A voir aussi

display– clear– z-index– align-self– align-self– align-self– vertical-align