path: root/files/fr/web/css/align-items/index.html

---
title: align-items
slug: Web/CSS/align-items
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/align-items
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary">La propriété CSS <strong><code>align-items</code></strong> définit la valeur de {{cssxref("align-self")}} sur l'ensemble des éléments-fils directs.</span> La propriété <code>align-self</code> définit elle l'alignement d'un objet au sein de son conteneur. Pour les boîtes flexibles, cette propriété contrôle l'alignement par rapport à l'axe secondaire (<em>cross axis</em>). Au sein d'une grille CSS, elle contrôle l'alignement des éléments sur l'axe de bloc de <a href="/fr/docs/Glossaire/Zones_de_grille">la zone de grille</a> correspondante.</p>

<p>L'exemple qui suit illustre le fonctionnement des différentes valeurs de <code>align-items</code> au sein d'une grile.</p>

<div>{{EmbedInteractiveExample("pages/css/align-items.html")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<p>À l'heure actuelle, cette propriété est prise en charge pour les dispositions <em>Flexbox</em> et grilles CSS. Pour les boîtes flexibles, cela contrôle l'alignement des objets sur l'axe secondaire et pour les grilles, cela contrôle l'alignement sur l'axe en bloc.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush:css no-line-numbers">/* 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;
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;
</pre>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>L'effet obtenu avec ce mot-clé dépend du mode de disposition utilisé :
 <ul>
  <li>Pour les éléments positionnés de façon absolue, ce mot-clé est synonyme de <code>start</code> pour les éléments remplacés, pour les autres éléments positionnés de façon absolue, il est synonyme de <code>stretch</code>.</li>
  <li>Pour les éléments avec une position statique sur une disposition absolue, ce mot-clé se comporte comme <code>stretch</code>.</li>
  <li>Pour les éléments flexibles, ce mot-clé est synonyme de <code>stretch</code>.</li>
  <li>Pour les éléments d'une grille, ce mot-clé se comportera comme <code>stretch</code> sauf pour les boîtes ayant des dimensions intrinsèques où il se comporte comme <code>start</code>.</li>
  <li>Cette propriété ne s'applique pas aux boîtes en bloc ou aux cellules de tableaux.</li>
 </ul>
 </dd>
 <dt><code>flex-start</code></dt>
 <dd>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.</dd>
 <dt><code>flex-end</code></dt>
 <dd>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.</dd>
 <dt><code>center</code></dt>
 <dd>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é.</dd>
 <dt><code>start</code></dt>
 <dd>Les éléments sont alignés sur le bord au début du conteneur selon l'axe de bloc.</dd>
 <dt><code>end</code></dt>
 <dd>Les éléments sont alignés sur le bord à la fin du conteneur selon l'axe de bloc</dd>
 <dt><code>center</code></dt>
 <dd>Les éléments sont centrés sur l'axe en bloc du conteneur.</dd>
 <dt><code>self-start</code></dt>
 <dd>Les éléments sont accolés au bord du début du conteneur dans l'axe de bloc.</dd>
 <dt><code>self-end</code></dt>
 <dd>Les éléments sont accolés au bord à la fin du conteneur dans l'axe de bloc.</dd>
</dl>

<dl>
 <dt><code>baseline</code></dt>
 <dt><code>first baseline<br>
 last baseline</code></dt>
 <dd>Tous les éléments flexibles sont alignés afin que <a href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">leurs différentes lignes de base</a> 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.</dd>
 <dt><code>stretch</code></dt>
 <dd>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.</dd>
 <dt><code>safe</code></dt>
 <dd>Ce mot-clé est utilisé avec un mot-clé d'alignement. 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 <code>start</code> à la place.</dd>
 <dt><code>unsafe</code></dt>
 <dd>Ce mot-clé est utilisé avec un mot-clé d'alignement. 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.</dd>
 <dt>
 <h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
 </dt>
</dl>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css; highlight[4]">#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 &gt; 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;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div id="container" class="flex"&gt;
  &lt;div id="item1"&gt;1&lt;/div&gt;
  &lt;div id="item2"&gt;2&lt;/div&gt;
  &lt;div id="item3"&gt;3&lt;/div&gt;
  &lt;div id="item4"&gt;4&lt;/div&gt;
  &lt;div id="item5"&gt;5&lt;/div&gt;
  &lt;div id="item6"&gt;6&lt;/div&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
  &lt;label for="display"&gt;display: &lt;/label&gt;
  &lt;select id="display"&gt;
    &lt;option value="flex"&gt;flex&lt;/option&gt;
    &lt;option value="grid"&gt;grid&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;

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

    &lt;option value="start"&gt;start&lt;/option&gt;
    &lt;option value="end"&gt;end&lt;/option&gt;
    &lt;option value="self-start"&gt;self-start&lt;/option&gt;
    &lt;option value="self-end"&gt;self-end&lt;/option&gt;
    &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
    &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;

    &lt;option value="safe center"&gt;safe center&lt;/option&gt;
    &lt;option value="unsafe center"&gt;unsafe center&lt;/option&gt;
    &lt;option value="safe right"&gt;safe right&lt;/option&gt;
    &lt;option value="unsafe right"&gt;unsafe right&lt;/option&gt;
    &lt;option value="safe end"&gt;safe end&lt;/option&gt;
    &lt;option value="unsafe end"&gt;unsafe end&lt;/option&gt;
    &lt;option value="safe self-end"&gt;safe self-end&lt;/option&gt;
    &lt;option value="unsafe self-end"&gt;unsafe self-end&lt;/option&gt;
    &lt;option value="safe flex-end"&gt;safe flex-end&lt;/option&gt;
    &lt;option value="unsafe flex-end"&gt;unsafe flex-end&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
</pre>

<div class="hidden">
<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">var values = document.getElementById('values');
var display = document.getElementById('display');
var container = document.getElementById('container');

values.addEventListener('change', function (evt) {
  container.style.alignItems = evt.target.value;
});

display.addEventListener('change', function (evt) {
  container.className = evt.target.value;
});
</pre>
</div>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample("Exemples", "260px", "290px")}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}}</td>
   <td>{{Spec2("CSS3 Box Alignment")}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}</td>
   <td>{{Spec2('CSS3 Flexbox')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>

<p>{{Compat("css.properties.align-items.flex_context")}}</p>

<h3 id="Prise_en_charge_pour_les_dispositions_en_grille">Prise en charge pour les dispositions en grille</h3>

<p>{{Compat("css.properties.align-items.grid_context")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles CSS</a></li>
 <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
 <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
 <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
 <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
 <li>La propriété {{cssxref("align-self")}}</li>
</ul>