MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

La propriété CSS align-content définit la façon dont l'espace est réparti entre et autour des éléments le long de l'axe en bloc du conteneur (c'est-à-dire l'axe orthogonal à l'axe d'écriture) lorsque celui-ci est un conteneur de boîte flexible.

/* Alignement le long de l'axe */
align-content: center;     /* Les éléments sont groupés au centre */
align-content: start;      /* Les éléments sont groupés au début  */
align-content: end;        /* Les éléments sont groupés à la fin */
align-content: flex-start; /* Les éléments flexibles sont groupés au début */
align-content: flex-end;   /* Les éléments flexibles sont groupés à la fin */
align-content: left;       /* Les éléments sont groupés à gauche */
align-content: right;      /* Les éléments sont groupés à droite */

/* Alignement sur la ligne de base */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* Répartition de l'espace */
align-content: space-between; /* L'espace est réparti entre
                                 les éléments, le premier est
                                 accolé au bord et le dernier
                                 également. */
align-content: space-around;  /* L'espace est réparti entre les
                                 éléments avec un demi-espace
                                 au début et à la fin */
align-content: space-evenly;  /* L'espace est réparti entre les
                                 éléments et autour */
align-content: stretch;       /* Les éléments dimensionnés avec
                                 auto sont étirés également 
                                 afin de remplir le conteneur*/

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

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

Cette propriété n'aura aucun effet sur les boîtes flexibles disposées sur une seule ligne.

Valeur initialestretch
Applicabilitéconteneurs flexibles multi-lignes
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

start
Les éléments sont regroupés vers le bord au début de l'axe de bloc.
end
Les éléments sont regroupés vers le bord à la fin de l'axe de bloc.
flex-start
Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de start.
flex-end
Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de end.
center
Les éléments sont regroupés au centre de l'axe de bloc.
left
Les éléments sont regroupés vers le bord gauche du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme start.
right
Les éléments sont regroupés vers le bord droit du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme start.
baseline
first baseline

last baseline
Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.
Si first baseline n'est pas prise en charge, la valeur correspondra à start, si last baseline n'est pas prise en charge, la valeur correspondra à end.
space-between
Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, le premier élément est aligné sur le bord au début du conteneur et le dernier élément est aligné sur le bord à la fin du conteneur.
space-around
Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, la moitié de cet espace est utilisée entre le premier élément et le bord au début du conteneur et la moitié de cet espace est utilisée entre le dernier élément et le bord à la fin du conteneur
space-evenly
Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, entre le premier élément et le bord du conteneur et entre le dernier élément et le bord du conteneur.
stretch
Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en bloc, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par max-height/max-width (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.
safe
Si l'élément dépasse du conteneur avec la valeur d'alignement indiquée, l'élément sera alors aligné avec la valeur start.
unsafe
Quelle que soit la taille et le dépassement éventuellement occasionné, l'élément est aligné avec la valeur indiquée.

Syntaxe formelle

flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

Exemples

CSS

#container {
  height:200px;
  width: 240px;
  align-content: center; /* Cette valeur peut être changée dans la démonstration */
  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-content: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="stretch">stretch</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="space-between">space-between</option>
    <option value="space-around">space-around</option>
    <option value="space-evenly">space-evenly</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="baseline">baseline</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 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
La définition de 'align-content' dans cette spécification.
Version de travail Ajout des valeurs space-evenly, [ first | last ]? baseline, start, end, left, right et unsafe | safe.
CSS Flexible Box Layout Module
La définition de 'align-content' 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
29.0
(Oui)-webkit
(Oui)
28.0 (28.0)[1] 11 12.10 6.1-webkit
9.0
space-evenly Pas de support Pas de support 52.0 (52.0) Pas de support Pas de support Pas de support
start, end Pas de support[2] Pas de support (Oui) Pas de support Pas de support[2] ?
left, right Pas de support[2] Pas de support 52.0 (52.0)[3] Pas de support Pas de support[2] ?
baseline 57.0 Pas de support (Oui) Pas de support 44.0 ?
first baseline, last baseline Pas de support Pas de support 52.0 (52.0) Pas de support Pas de support ?
stretch 57.0 Pas de support 52.0 (52.0) Pas de support 44.0 ?
Fonctionnalité Android Chrome pour Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 4.4 (Oui) (Oui)-webkit
(Oui)
28.0 (28.0)[1] 11.0 12.10 7.1-webkit
9.2
space-evenly Pas de support Pas de support Pas de support 52.0 (52.0) Pas de support Pas de support Pas de support
start, end Pas de support[2] Pas de support[2] Pas de support Pas de support Pas de support Pas de support[2] ?
left, right Pas de support[2] Pas de support[2] Pas de support 52.0 (52.0)[3] Pas de support Pas de support[2] ?
baseline 57.0 57.0 Pas de support (Oui) Pas de support 44.0 ?
first baseline, last baseline Pas de support Pas de support Pas de support 52.0 (52.0) Pas de support Pas de support ?
stretch 57.0 57.0 Pas de support 52.0 (52.0) Pas de support 44.0 ?

[1] En plus de la prise en charge de la version non-préfixée, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) a ajouté la prise en charge d'une version préfixée par -webkit à des fins de compatibilité web. Cette fonctionnalité devait être activée via la préférence layout.css.prefixes.webkit qui était 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.

[2] Les mots-clés start, end, left et right sont reconnus mais leur gestion n'est pas implémentée.

[3] Les versions antérieures à Gecko 52 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) reconnaissaient les mots-clés left et right mais ne les implémentaient pas.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, JackNUMBER, fscholz, Sebastianz, Goofy, Dexter_Deter
 Dernière mise à jour par : SphinxKnight,