Propriété CSS align-content
La propriété align-content définit comment le navigateur répartit l'espace entre les lignes. Voyez et testez des exemples avec les six valeurs.
La propriété CSS align-content contrôle la façon dont un conteneur flex distribue l'espace supplémentaire entre et autour de ses lignes le long de l'axe transversal. Cette page explique quand la propriété s'applique, passe en revue chaque valeur avec un exemple exécutable et montre en quoi elle diffère des propriétés d'alignement associées.
Dans un conteneur flex en direction ligne, l'axe principal est horizontal, donc l'axe transversal est vertical. align-content déplace donc des rangées entières d'éléments vers le haut, vers le bas ou les répartit verticalement — il ne touche jamais les éléments individuellement.
Quand align-content prend-il effet ?
Deux conditions doivent être réunies, sinon la propriété n'a aucun effet :
- Le conteneur doit autoriser le retour à la ligne — définissez
flex-wrap: wrap(ou utilisez le raccourciflex-flow). La valeur par défautnowrapmaintient tout sur une seule ligne. - Il doit y avoir plus d'une ligne, ainsi que de l'espace libre sur l'axe transversal pour que les lignes puissent se déplacer.
Si vous souhaitez aligner les éléments à l'intérieur d'une seule ligne, utilisez plutôt align-items. align-content s'applique aux lignes en tant que groupe ; align-items s'applique aux éléments à l'intérieur de chaque ligne. La propriété align-content fait partie des propriétés CSS3.
La valeur stretch est la valeur par défaut de cette propriété.
La propriété align-content accepte les valeurs suivantes :
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
- stretch
| Valeur initiale | stretch |
|---|---|
| S'applique à | Conteneurs flex multi-lignes. |
| Héritage | Non. |
| Animatable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.alignContent = "flex-end"; |
Syntaxe
Syntaxe de la propriété CSS align-content
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | initial | inherit;Exemple de la propriété align-content avec la valeur stretch :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: stretch;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: stretch; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Résultat
Exemple de la propriété align-content avec la valeur « center » :
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: center;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: center; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Exemple de la propriété align-content avec la valeur « flex-start » :
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: flex-start; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Exemple de la propriété align-content avec la valeur « flex-end » :
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: flex-end;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: flex-end; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Dans l'exemple suivant, l'espace est distribué uniformément entre les lignes flex.
Exemple de la propriété align-content avec la valeur « space-between » :
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: space-between;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: space-between; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Résultat
Un autre exemple avec la valeur « space-around ». L'espace entre les lignes flex est égal.
Exemple de la propriété align-content avec la valeur « space-around » :
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: space-around; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Avec space-evenly, les espaces avant la première ligne, entre chaque ligne et après la dernière ligne sont tous identiques — contrairement à space-around, où les espaces extérieurs représentent la moitié des espaces intérieurs.
Exemple de la propriété align-content avec la valeur « space-evenly » :
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: space-evenly;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: space-evenly; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>align-content vs. align-items vs. justify-content
Ces trois propriétés sont faciles à confondre car elles alignent toutes les enfants flex :
align-content— aligne les lignes en tant que groupe sur l'axe transversal. Nécessite un retour à la ligne et plusieurs lignes.align-items— aligne les éléments à l'intérieur d'une seule ligne sur l'axe transversal. Fonctionne même avec une seule ligne.justify-content— aligne les éléments le long de l'axe principal (la direction dans laquelle les éléments s'écoulent).
Pour une présentation approfondie de la façon dont ces propriétés s'articulent, consultez The Ultimate Guide to Flexbox.
Compatibilité des navigateurs
align-content est pris en charge par tous les navigateurs modernes — Chrome, Firefox, Safari, Edge et Opera. Il fait partie de la spécification Flexbox stable, aucun préfixe vendor n'est donc nécessaire pour les versions actuelles.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| stretch | Étire les éléments pour qu'ils remplissent le conteneur. Il s'agit de la valeur par défaut de cette propriété. | Essayer » |
| center | Les éléments sont placés au centre du conteneur. | Essayer » |
| flex-start | Les éléments sont placés au début du conteneur. | Essayer » |
| flex-end | Les éléments sont placés à la fin du conteneur. | Essayer » |
| space-between | Distribue l'espace uniformément entre les lignes flex. | Essayer » |
| space-around | Les éléments sont distribués avec un espace égal entre eux. | Essayer » |
| space-evenly | Distribue les éléments avec un espace égal entre eux, ainsi qu'avant le premier et après le dernier élément. | Essayer » |
| initial | Applique la valeur par défaut de la propriété. | Essayer » |
| inherit | Hérite de la propriété de son élément parent. |