Attribut JUSTIFY-CONTENT

Rôle

L’attribut justify-content permet de gérer l’alignement sur l’axe principal des éléments flex-item d’un flex-container (élément parent)

L’axe principal est soit l’horizontal (par défaut avec display:flex), soit la verticale (avec flex-direction : column).

Le flex-container correspond à n’importe quel bloc qui contient des enfants (flex-item) sur lequel on va appliquer le modèle de boîte flexible (display:flex)

 Note : voir notre tutoriel sur le modèle flex-box.

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.justifyContent

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

.rowflex{
  width : 500px;
  border : thin solid silver;  
  display : flex;
  justify-content: space-around;
}
.rowflex div{
  padding: 5px;
}
.rowflex .milieu{
  background-color: orange;
}
.rowflex .gauche{
  background-color: pink;
}
.rowflex .droite{
  background-color: silver;
}

– Le code HTML

<div class="rowflex">
  <div class="gauche">gauche</div>
  <div class="milieu">milieu</div>
  <div class="droite">droite</div>
</div>

Résultat

Compatibilité

 21.0(-webkit-)  18.0(-moz-)  10.0(-ms-)  6.1(-webkit-)  12.1

Valeurs

Les différentes valeurs de l’attribut justify-content sont:

flex-start

Au début de l’axe (valeur par défaut)
Syntaxe :
justify-content : flex-start

flex-end

A la fin de l’axe
Syntaxe :
justify-content : flex-end

center

Au milieu de l’axe
Syntaxe :
justify-content : center

space-between

Répartition justifiée entre le premier et le dernier élément
Syntaxe :
justify-content : space-between

space-around

Répartition justifiée du début à la fin
Syntaxe :
justify-content : space-around

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
justify-content : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
justify-content : inherit

A voir aussi

display– clear– z-index– align-content– align-items– align-self– vertical-align