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é
21.0(-webkit-) 
18.0(-moz-) 
10.0(-ms-) 
6.1(-webkit-) 
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
