Attribut ALIGN-ITEMS

Rôle

L’attribut align-items permet de gérer l’alignement sur l’axe secondaire des éléments flex-item d’un flex-container (élément parent)

L’axe secondaire est l’axe perpendiculaire à l’axe principal.

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.alignItems

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

.rowflex{
  width : 500px;
  height: 70px;
  border : thin solid silver;  
  display : flex;
  justify-content: space-around;
  align-items : strech;
}
.rowflex div{
  padding: 5px;
}
.rowflex .milieu{
  background-color: orange;
}
.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

Compatibilité

 21.0(-webkit-)  18.0(-moz-)  10.0(-ms-)  6.1(-webkit-)  12.1

Valeurs

Les différentes valeurs de l’attribut align-items 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

baseline

Alignement sur la ligne de base
Syntaxe :
align-items : baseline

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-content– align-items– align-self– vertical-align