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 et le long de l'axe principal lorsque le conteneur est une grille.

L'exemple qui suit utilise une grille comme conteneur afin d'illustrer le comportement des valeurs de cette propriété.

Cette propriété n'aura aucun effet sur les boîtes flexibles disposées sur une seule ligne (celles avec flex-wrap: nowrap par exemple).

Syntaxe

/* Alignement le long de l'axe */
/* Note : align-content ne prend pas en charge les valeurs left et right */
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 */

/* Alignement normal */
align-content: normal;

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

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.
normal
Les éléments sont groupés sur leur position par défaut, comme si align-content n'avait pas été défini.
baseline
first baseline

last baseline
La ligne de base est la ligne sur laquelle reposent la plupart des lettres et en dessous de laquelle le jambage des caractéres descend.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
Ce mot-clé est utilisé avec un mot-clé pour l'alignement. 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
Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Quelle que soit la taille et le dépassement éventuellement occasionné, l'élément est aligné avec la valeur indiquée.

Syntaxe formelle

normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>


<baseline-position> = [ first | last ]? baseline
<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end

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 Level 3
La définition de 'align-content' dans cette spécification.
Version de travail Ajout des valeurs [ 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.
Valeur initialenormal
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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Supported in Flex LayoutChrome Support complet 29
Support complet 29
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 28
Support complet 28
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 48
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
IE Support complet 11Opera Support complet 12.1Safari Support complet 9
Support complet 9
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 4.4
Support complet 4.4
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 29
Support complet 29
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 28
Support complet 28
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 48
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
Opera Android Support complet 12.1Safari iOS Support complet 9.2
Support complet 9.2
Support complet 7.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet Oui
Supported in Grid LayoutChrome Support complet 57Edge Support complet 16Firefox Support complet 52IE Aucun support NonOpera Support complet 44Safari Support complet 10.1WebView Android Support complet 57Chrome Android Support complet 52Edge Mobile Support complet OuiFirefox Android Support complet 52Opera Android Support complet 44Safari iOS Support complet 10.3Samsung Internet Android Support complet 6.2

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Prise en charge pour les dispositions flexibles (Flexbox)

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 29
Support complet 29
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 28
Support complet 28
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 48
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
IE Support complet 11Opera Support complet 12.1Safari Support complet 9
Support complet 9
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 4.4
Support complet 4.4
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 29
Support complet 29
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 28
Support complet 28
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 48
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
Opera Android Support complet 12.1Safari iOS Support complet 9.2
Support complet 9.2
Support complet 7.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet Oui
space-evenlyChrome Support complet 60Edge Aucun support NonFirefox Support complet 52IE Aucun support NonOpera Support complet 47Safari Support complet 11WebView Android Support complet 60Chrome Android Support complet 60Edge Mobile Aucun support NonFirefox Android Support complet 52Opera Android Support complet 47Safari iOS Support complet 11Samsung Internet Android Aucun support Non
start and endChrome Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Edge Aucun support NonFirefox Support complet OuiIE Aucun support NonOpera Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Safari Aucun support NonWebView Android Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Chrome Android Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Safari iOS Aucun support NonSamsung Internet Android Support complet Oui
left and rightChrome Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Edge Aucun support NonFirefox Aucun support 52 — 60
Notes
Aucun support 52 — 60
Notes
Notes align-content no longer accepts the left and right values
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
IE Aucun support NonOpera Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Safari ? WebView Android Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Chrome Android Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Edge Mobile Aucun support NonFirefox Android Aucun support 52 — 60
Notes
Aucun support 52 — 60
Notes
Notes align-content no longer accepts the left and right values
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Opera Android Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes This value is recognized, but has no effect.
Safari iOS ? Samsung Internet Android Support complet Oui
baselineChrome Support complet 57Edge Aucun support NonFirefox Support complet OuiIE Aucun support NonOpera Support complet 44Safari ? WebView Android Support complet 57Chrome Android Support complet 57Edge Mobile Aucun support NonFirefox Android Support complet OuiOpera Android Support complet 44Safari iOS ? Samsung Internet Android Support complet 7.0
first baseline and last baselineChrome Aucun support NonEdge Aucun support NonFirefox Support complet 52IE Aucun support NonOpera Aucun support NonSafari ? WebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Support complet 52Opera Android Aucun support NonSafari iOS ? Samsung Internet Android Aucun support Non
stretchChrome Support complet 57Edge Aucun support NonFirefox Support complet 52IE Aucun support NonOpera Support complet 44Safari Support complet 9WebView Android Support complet 57Chrome Android Support complet 57Edge Mobile Aucun support NonFirefox Android Support complet 52Opera Android Support complet 44Safari iOS Support complet 9Samsung Internet Android Support complet 7.0
safe and unsafeChrome Aucun support NonEdge Aucun support NonFirefox Support complet 63IE Aucun support NonOpera Aucun support NonSafari ? WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet 63Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Prise en charge pour les dispositions avec les grilles CSS

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 57Edge Support complet 16Firefox Support complet 52IE Aucun support NonOpera Support complet 44Safari Support complet 10.1WebView Android Support complet 57Chrome Android Support complet 52Edge Mobile Support complet OuiFirefox Android Support complet 52Opera Android Support complet 44Safari iOS Support complet 10.3Samsung Internet Android Support complet 6.2

Légende

Support complet  
Support complet
Aucun support  
Aucun support

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,