OUJOOD.COM
Définition et utilisation de la propriété css justify-content
La propriété justify-content aligne les éléments du conteneur flexible lorsque les éléments n'utilisent pas tout l'espace disponible sur l'axe principal (horizontalement).Astuce : utilisez la propriété align-items pour aligner les éléments verticalement.
Syntaxe CSS
justify-content: flex-start|flex-end|center|space-between |space-around|space-evenly|initial|inherit;
| Valeurs par défaut | flex-start |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.justifyContent="space-between" |
Prise en charge de la propriété css justify-content dans navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 29 21 -webkit- | 11 | 28 18 -moz- | 9 6.1 -webkit- | 7 17 |
<!DOCTYPE html>
<html >
<head>
<title>justify-content:center</title>
<style>
#conteneur {
width: 400px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
justify-content: center;
}
#conteneur div {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<h1>La propriété justify-content</h1>
<div id="conteneur">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:pink;">3</div>
</div>
</body>
</html>
Valeurs de la propriété css justify-content
| Valeur | Description |
|---|---|
| Stretch | Par défaut. Les éléments sont étirés pour s'adapter au conteneur |
| center | Les éléments sont positionnés au centre du conteneur |
| flex-start | Les éléments sont positionnés au début du conteneur |
| flex-end | Les éléments sont positionnés à la fin du conteneur |
| baseline | Les éléments sont positionnés à la ligne de base du conteneur. |
| initial | Définit cette propriété à sa valeur par défaut. |
| inherit | Hérite de cette propriété de son élément parent. Lire à propos de inherit |
Il existe plusieurs options d'alignement disponibles, chacune ayant une utilisation spécifique.
L'option "flex-start" aligne les éléments à gauche du conteneur. Cette option est utile lorsque vous voulez que les éléments soient alignés à gauche par défaut, mais que vous voulez également donner la possibilité de les aligner à droite.
.conteneur {
display: flex;
justify-content: flex-start;
}L'option "center" aligne les éléments au centre du conteneur. Cette option est utile lorsque vous voulez que les éléments soient centralisés par défaut, mais que vous voulez également donner la possibilité de les aligner à gauche ou à droite.
.conteneur {
display: flex;
justify-content: center;
}L'option "flex-end" aligne les éléments à droite du conteneur. Cette option est utile lorsque vous voulez que les éléments soient alignés à droite par défaut, mais que vous voulez également donner la possibilité de les aligner à gauche.
.conteneur {
display: flex;
justify-content: flex-end;
}L'option "space-between" distribue les éléments également entre les bords gauche et droit du conteneur. Cette option est utile lorsque vous voulez que les éléments soient espacés de manière égale, mais que vous voulez également donner la possibilité de les aligner à gauche, au centre ou à droite.
.conteneur {
display: flex;
justify-content: space-between;
}L'option "space-around" distribue les éléments également autour du conteneur. Cette option est utile lorsque vous voulez que les éléments soient espacés de manière égale, mais que vous voulez également donner la possibilité de les aligner à gauche, au centre ou à droite.
.conteneur {
display: flex;
justify-content: space-around;
}En résumé, la propriété CSS justify-content vous permet de définir l'alignement horizontal de vos éléments dans un conteneur. Il existe plusieurs options d'alignement disponibles, chacune ayant une utilisation spécifique. Il est important de choisir l'option qui convient le mieux à votre projet pour obtenir le résultat souhaité.