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.

Valeur initialestretch
Applicabilitéconteneurs flexibles
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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>

Spécifications

Spécification État Commentaires
CSS Flexible Box Layout Module
La définition de 'align-items' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 21.0 [1] -webkit 20.0 (20.0)[2] (Oui) 11.0 [3] 12.10 7.0-webkit
Fonctionnalité Android Webview Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile Chrome pour Android
Support simple 4.4 (Oui) 20.0 (20.0)[2] (Oui) Pas de support 12.10 7.0-webkit  

[1] Dans les versions antérieures de la spécification, les éléments fils positionnés de façon absolue étaient considérés comme des objets flexibles de 0 par 0. Les versions ultérieures de la spécification retirent les éléments du flux et définissent leurs positions selon les valeurs des propriétés align et justify. Chrome implémente ce nouveau comportement à partir de Chrome 52.

[2] Pour activer la prise en charge des boîtes flexibles dans Firefox 18 et 19, il fallait activer la préférence layout.css.flexbox.enabled. Le support des boîtes flexibles sur plusieurs lignes/colonnes fonctionne depuis Firefox 28.
En plus de la version non préfixée, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

[3] Pour Internet Explorer 10-11 (mais plus à partir d'IE 12), si les objets flexibles en colonne avaient align-items: center; et que leur contenu était trop grand, les objets dépassaient de leur conteneur. Voir Flexbug #2 pour plus d'informations.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, rolf39
 Dernière mise à jour par : SphinxKnight,