We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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.

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

Syntaxe

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

/* Alignement géométrique */
/* align-items ne gère pas les valeurs left et right */ 
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; 

/* 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;

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 des éléments flexibles 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 des éléments flexibles sur l'axe en bloc est aligné avec le bord de la ligne à la fin de l'axe en bloc.
center
Les éléments flexibles sont centrés sur l'axe en bloc au sein de la ligne. Si ces éléments sont plus grands que la ligne, ils dépasseront également de chaque côté.
start
Les éléments sont alignés sur le bord au début du conteneur selon l'axe de bloc.
end
Les éléments sont alignés sur le bord à la fin du conteneur selon l'axe de bloc
center
Les éléments sont centrés sur l'axe en bloc du conteneur.
self-start
Les éléments sont accolés au bord du début du conteneur dans l'axe de bloc.
self-end
Les éléments sont accolés 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

normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]


<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

Exemples

CSS

#container {
  height:200px;
  width: 240px;
  align-items: center; /* Cette valeur peut être modifiée dans l'exemple */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#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;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

HTML

<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-items: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="self-start">self-start</option>
    <option value="self-end">self-end</option>
    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe self-end">safe self-end</option>
    <option value="unsafe self-end">unsafe self-end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

Résultat

Spécifications

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

Valeur initialenormal
Applicabilitétous les éléments
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

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

52

291

21 -webkit-

12

12 -webkit-

202

49 -webkit-

18 —?3

48 -webkit- 4

11512.17 -webkit-
first baseline and last baseline ? ?45 ? ? ?
start and end ? ?45 ? ? ?
left and right ? ?45 ? ? ?
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple

52

291

21 -webkit-

52

291

21 -webkit-

Oui

Oui -webkit-

202

49 -webkit-

18 —?3

48 -webkit- 4

12.17 -webkit- ?
first baseline and last baseline ? ? ?45 ? ? ?
start and end ? ? ?45 ? ? ?
left and right ? ? ?45 ? ? ?

1. Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.

2. Multi-line flexbox has been supported since Firefox 28.

3. From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

5. In Internet Explorer 10 and 11, if column flex items have align-items: center; set on them and their content is too large, then they will overflow the bounds of their container. See Flexbug #2.

Voir aussi

Étiquettes et contributeurs liés au document

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