Propriété justify-content

La propriété justify-content définit l'alignement des éléments le long de l'axe principal pour les conteneurs flex et le long de l'axe horizontal pour les grilles. Elle s'applique à l'élément parent.

Syntaxe

sélecteur {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

Valeurs

Valeur	Description
`flex-start`	Les blocs sont alignés au début de l'axe principal (horizontal).
`flex-end`	Les blocs sont alignés à la fin de l'axe principal (horizontal).
`center`	Les blocs sont centrés le long de l'axe principal (horizontal).
`space-between`	Les blocs sont répartis uniformément le long de l'axe principal (horizontal), le premier élément étant aligné au début de l'axe et le dernier à la fin.
`space-around`	Les blocs sont répartis le long de l'axe principal (horizontal), avec un espacement égal entre le premier bloc et le début de l'axe, le dernier bloc et la fin de l'axe, et entre les blocs eux-mêmes. Cependant, ils ne sont pas égaux, comme on pourrait le penser : les espaces s'additionnent et entre deux blocs la distance est deux fois plus grande qu'entre un bloc et le début/fin de l'axe.

Valeur par défaut : flex-start.

Exemple . Valeur flex-start

Actuellement, l'axe est dirigé de gauche à droite (cela est dû à flex-direction: row), et les blocs sont alignés sur le côté gauche :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemple . Valeur flex-end

Dans cet exemple, l'axe est également dirigé de gauche à droite, mais les blocs sont alignés sur le côté droit, car justify-content est défini avec la valeur flex-end :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemple . Valeur center

Maintenant, les blocs seront centrés indépendamment de la direction de l'axe principal :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemple . Valeur space-between

Les blocs sont répartis uniformément le long de l'axe principal, le premier élément étant aligné au début de l'axe et le dernier à la fin :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemple . Valeur space-around

Les blocs sont répartis le long de l'axe principal, avec un espacement égal entre le premier bloc et le début de l'axe, le dernier bloc et la fin de l'axe, et entre les blocs eux-mêmes. Cependant, les espaces s'additionnent et entre deux blocs la distance est deux fois plus grande qu'entre un bloc et le début/fin de l'axe :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemple . Valeur center. Axe vers le bas

Changeons la direction de l'axe principal en définissant flex-direction avec la valeur column :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemple . Valeur space-between. Axe vers le bas

Maintenant, les blocs seront répartis uniformément verticalement :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemple . Alignement au début de l'axe horizontal (lignes) dans une grille

Définissons l'alignement de nos éléments au début de l'axe horizontal :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Exemple . Alignement au centre de l'axe horizontal dans une grille

Maintenant, définissons l'alignement de nos éléments au centre de l'axe horizontal :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Exemple . Alignement à la fin de l'axe horizontal dans une grille

Définissons l'alignement de nos éléments à la fin de l'axe horizontal :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Voir aussi

la propriété flex-direction,
qui définit la direction des axes des conteneurs flex
la propriété align-items,
qui définit l'alignement le long de l'axe transversal
la propriété flex-wrap,
qui définit le retour à la ligne des conteneurs flex
la propriété flex-flow,
raccourci pour flex-direction et flex-wrap
la propriété order,
qui définit l'ordre des blocs flex
la propriété align-self,
qui définit l'alignement d'un seul bloc
la propriété flex-basis,
qui définit la taille d'un bloc flex spécifique
la propriété flex-grow,
qui définit la capacité d'expansion des blocs flex
la propriété flex-shrink,
qui définit la capacité de rétrécissement des blocs flex
la propriété flex,
raccourci pour flex-grow, flex-shrink et flex-basis