align-items

La propriété align-items permet d'aligner les éléments flexibles d'une ligne ou d'une colonne flexible. Elle fonctionne de la même façon que justify-content mais dans la direction orthogonale. À la différence de align-content, cette propriété définit l'alignement des objets à l'intérieure de la ligne ou de la ligne flexible courante alors que align-content définit l'alignement des lignes/colonnes entre elles.

Pour plus d'informations et de détails sur les différentes propriétés dans le modèle des boîtes flexibles (flexbox), voir Manipuler les boîtes flexibles CSS.

Syntaxe

/* On aligne sur la ligne cross-start */
align-items: flex-start;

/* On aligne sur la ligne cross-end */
align-items: flex-end;

/* On aligne sur la ligne cross-axis */
align-items: center;

/* L'alignement se fait sur les lignes de base */
/* des éléments flexibles                      */
align-items: baseline;

/* Les éléments sont étirés */
align-items: stretch;

/* Valeurs globales */
align-items: inherit;
align-items: initial;
align-items: unset;

Valeurs

flex-start

Le bord de la marge sur la ligne de début, dans l'axe orthogonal à la direction, est alignée avec le bord de la marge sur la ligne de début pour la rangée flexible.

flex-end

Le bord de la marge sur la ligne de fin, dans l'axe orthogonal à la direction, est alignée avec le bord de la marge sur la ligne de fin pour la rangée flexible.

center

La boîte de marge pour l'élément flexible est centrée sur l'axe orthogonal à la direction de la boîte flexible. Si, sur cet axe, la taille d'un élément est supérieure à la taille du conteneur flexible, l'élément dépassera dans les deux directions.

baseline

Tous les éléments flexibles sont alignés afin qu'ils partagent la même ligne de base. L'élément pour lequel la distance est la plus grande entre sa ligne de début et sa ligne de base sera aligné avec la ligne de début de la boîte flexible.

stretch

Les éléments flexibles sont étirés afin que la taille, dans le sens orthogonal à la boîte flexible, soit la même que la rangée tout en respectant les contraintes de hauteur et de largeur.

Syntaxe formelle

flex-start | flex-end | center | baseline | stretch

Exemples

CSS

#container {
  display: flex;
  height:200px;
  width: 240px;
  flex-wrap: wrap;
  align-items: flex-end; /* Cette valeur peut être modifiée dans la démo */
  background-color: #8c8c8c;
}

div > div {
  border: 2px solid #8c8c8c;
  width: 50px;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
}

HTML

<div id="container">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
  <div id="item6"></div>
</div>
<select id="itemsAlignment">
  <option value="flex-start">flex-start</option>
  <option value="flex-end" selected>flex-end</option>
  <option value="center">center</option>
  <option value="baseline">baseline</option>
  <option value="stretch">stretch</option>
</select>

var itemsAlignment = document.getElementById("itemsAlignment");
itemsAlignment.addEventListener("change", function (evt) {
  document.getElementById("container").style.alignItems = evt.target.value;
});

Spécifications

Compatibilité des navigateurs