align-items

La propriété CSS align-items définit la façon dont l'espace est réparti autour des éléments flexibles le long de l'axe en bloc du conteneur. Autrement dit, cette propriété fonctionne comme justify-items mais dans la direction perpendiculaire.

/* Mots-clés de base */ 
align-items: normal; 
align-items: stretch; 

/* Alignement géométrique */ 
align-items: center; /* Les éléments sont regroupés au centre */ 
align-items: start;  /* Les éléments sont regroupés au début */ 
align-items: end;    /* Les éléments sont regroupés à la fin */ 
align-items: flex-start; /* Les éléments flexibles sont regroupés au début */ 
align-items: flex-end;   /* Les éléments flexibles sont regroupés à la fin */ 
align-items: self-start; 
align-items: self-end; 
align-items: left;  /* Les éléments flexibles sont regroupés à gauche */ 
align-items: right; /* Les éléments flexibles sont regroupés à droite */ 

/* Alignement par rapport à la ligne de base */
align-items: first baseline; 
align-items: last baseline;

/* Gestion du dépassement */ 
align-items: safe center; 
align-items: unsafe center; 

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

À la différence de align-content, cette propriété définit l'alignement des éléments au sein de la ligne du conteneur flexible alors que align-content définit l'alignement des lignes.

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

Syntaxe

Valeurs

normal
L'effet obtenu avec ce mot-clé dépend du mode de disposition utilisé :
  • Pour les éléments positionnés de façon absolue, ce mot-clé est synonyme de start pour les éléments remplacés, pour les autres éléments positionnés de façon absolue, il est synonyme de stretch.
  • Pour les éléments avec une position statique sur une disposition absolue, ce mot-clé se comporte comme stretch.
  • Pour les éléments flexibles, ce mot-clé est synonyme de stretch.
  • Pour les éléments d'une grille, ce mot-clé se comportera comme stretch sauf pour les boîtes ayant des dimensions intrinsèques où il se comporte comme start.
  • Cette propriété ne s'applique pas aux boîtes en bloc ou aux cellules de tableaux.
flex-start
Le bord de la marge de l'élément flexible sur l'axe en bloc est aligné avec le bord de la ligne au début de l'axe en bloc.
flex-end
Le bord de la marge de l'élément flexible sur l'axe en bloc est aligné avec le bord de la ligne à la fin de l'axe en bloc.
center
L'élément flexible est centrée sur l'axe en bloc au sein de la ligne. Si cet élément est plus grand que la ligne, il dépassera également de chaque côté.
start
L'élément est aligné sur le bord au début du conteneur selon l'axe de bloc.
end
L'élément est aligné sur le bord à la fin du conteneur selon l'axe de bloc
center
L'élément est centré sur l'axe en bloc du conteneur.
left
Les éléments sont regroupés sur la gauche du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de start.
right
Les éléments sont regroupés sur la droite du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de start.
self-start
L'élément est accolé au bord du début du conteneur dans l'axe de bloc.
self-end
L'élément est accolé au bord à la fin du conteneur dans l'axe de bloc.
baseline
first baseline
last baseline
Tous les éléments flexibles sont alignés afin que leurs différentes lignes de base soient alignées. L'élément pour lequel on a la plus grande distance entre la marge et la ligne de base est aligné sur le bord de la ligne courante.
stretch
Les éléments flexibles sont étirés afin que la taille de la boîte de marge sur l'axe en bloc est la même que celle de la ligne sur laquelle l'élément se trouve, tout en respectant les contraintes de hauteur et de largeur.
safe
Si la taille d'un des éléments dépasse du conteneur avec la valeur d'alignement indiquée, l'alignement sera réalisé avec la valeur start à la place.
unsafe
Quelle que soit la taille relative et l'éventuel dépassement de l'élément par rapport au conteneur, la valeur indiquée pour l'alignement est respectée.

Syntaxe formelle

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

Exemples

CSS

#container {
  display: flex;
  height:200px;
  width: 240px;
  flex-wrap: wrap;
  /* Cette valeur peut être modifiée dans l'exemple */
  align-items: flex-end;
  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 Box Alignment Module
La définition de 'align-items' dans cette spécification.
Version de travail Ajout des valeurs space-evenly, [ first | last ]? baseline, start, end, left et right.    
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 Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 21.0-webkit[1] (Oui)-webkit
(Oui)
20.0 (20.0)[2] 11.0[3] 12.10 7.0-webkit
space-evenly, first/last baseline, start, end, left, right ? ? 45 (45) ? ? ?
Fonctionnalité Android Webview Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome pour Android
Support simple 4.4 (Oui) (Oui)-webkit
(Oui)
20.0 (20.0)[2] Pas de support 12.10 7.0-webkit ?
space-evenly, first/last baseline, start, end, left, right ? ? ? 45.0 (45) ? ? ? ?

[1] Les anciennes versions de la spécification considéraient les éléments positionnés de façon absolue comme des éléments flexibles mesurant 0 x 0. Pour les versions suivantes, ces éléments sont retirés du flux et leurs positions sont construites à partir 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 (flexbox) dans Firefox 18 et 19, il faut activer la préférence layout.css.flexbox.enabled avec la valeur true. Les boîtes flexibles sur plusieurs lignes sont prises en charge depuis 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 une version préfixée par -webkit à des fins de compatibilité web via la préférence layout.css.prefixes.webkit, alors désactivée par défaut. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette préférence est activée par défaut.

[3] In Internet Explorer 10-11 (but not 12+), if column flex items have align-items: center; set on them and their content is too large, they will overflow the bounds of their container. See Flexbug #2 for more info.

Voir aussi

Étiquettes et contributeurs liés au document

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