Propriété CSS justifier-content
Exemple
Alignez les éléments flexibles au centre du conteneur :
div
{
display: flex;
justify-content: center;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La justify-content
propriété 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.
Valeur par défaut: | flex-start |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.justifyContent="espace-entre" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit- ou -moz- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
justify-content | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
Syntaxe CSS
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
flex-start | Default value. Items are positioned at the beginning of the container | |
flex-end | Items are positioned at the end of the container | |
center | Items are positioned in the center of the container | |
space-between | Items will have space between them | |
space-around | Items will have space before, between, and after them | |
space-evenly | Items will have equal space around them | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Alignez les éléments flexibles au début du conteneur (c'est la valeur par défaut) :
div
{
display: flex;
justify-content: flex-start;
}
Exemple
Alignez les éléments flexibles à la fin du conteneur :
div
{
display: flex;
justify-content: flex-end;
}
Exemple
Affichez les éléments flexibles avec un espace entre les lignes :
div
{
display: flex;
justify-content: space-between;
}
Exemple
Affichez les éléments flexibles avec un espace avant, entre et après les lignes :
div
{
display: flex;
justify-content: space-around;
}
Pages connexes
Référence CSS : propriété align-content
Référence CSS : propriété align-items
Référence CSS : propriété align-self
Référence HTML DOM : propriété JustifyContent