Attribut justify-content CSS

Définition et utilisation

L'attribut justify-content aligne les éléments du conteneur flexible horizontalement, lorsque les éléments ne occupent pas tout l'espace disponible sur l'axe principal.

Astuce :Utilisez align-items attribut Aligner verticalement les éléments de l'attribut.

Voir également :

Tutoriel CSS :Flexbox CSS

Tutoriel CSS :CSS Grid

CSS 参考手册：align-content attribut

CSS 参考手册：align-items attribut

CSS 参考手册：Guide CSS :

Propriété align-selfGuide HTML DOM :

justify-content: space-between;

Propriété justifyContent

Afficher des éléments flexibles espacés avant, entre et après les lignes :
  div {
  Aligner les éléments flexibles au centre du conteneur :
justify-content: space-around;

}

justify-content: center;

Vous pouvez trouver plus d'exemples TIY en bas de la page.

Grammaire CSS

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

Valeur de l'attribut Valeur
Valeur par défaut : Description
Valeur par défaut. Les éléments sont placés au début du conteneur. flex-end
Les éléments sont placés à la fin du conteneur. center
Les éléments sont placés au centre du conteneur. space-between
Les éléments laissent de l'espace entre les lignes. space-around
Set this property to its default value. See Les éléments laissent de l'espace avant, entre et après la ligne. Set this property to its default value. SeePropriétés liées aux animations
Inherited from its parent element. See initial Inherited from its parent element. SeePropriétés liées aux animations

inherit

Détails techniques Valeur par défaut :
flex-start Héritage :
Non Création d'animation :Non pris en charge. Voir :Propriétés liées aux animations
。 Version :
CSS3 Grammaire JavaScript :

object.style.justifyContent="space-between"

justify-content: space-between;

Plus d'exemples

Afficher des éléments flexibles espacés avant, entre et après les lignes :
  div {
  Aligner les éléments flexibles au début du conteneur (par défaut) :
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-start;

Afficher des éléments flexibles espacés avant, entre et après les lignes :
  div {
  Aligner les éléments flexibles à la fin du conteneur :
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-end;

Afficher des éléments flexibles espacés avant, entre et après les lignes :
  div {
  Afficher des éléments flexibles espacés entre les lignes :
justify-content: space-around;

}

justify-content: space-between;

Exemple

Afficher des éléments flexibles espacés avant, entre et après les lignes :
  div {
  display: flex;
justify-content: space-around;

}

Essayez-le vous-même

Support du navigateur

Les numéros dans le tableau indiquent la première version du navigateur qui prend en charge pleinement cette propriété, en utilisant les préfixes -webkit- ou -moz- pour la version initiale.

propriété Chrome IE Firefox Safari Opera
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0