Propriété align-content

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

Syntaxe

sélecteur {
	align-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 transversal (vertical).
`flex-end`	Les blocs sont alignés à la fin de l'axe transversal (vertical).
`center`	Les blocs sont centrés le long de l'axe transversal (vertical).
`space-between`	Les blocs sont répartis le long de l'axe transversal (vertical), 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 transversal (vertical), avec un espacement identique entre le premier bloc et le début de l'axe, le dernier bloc et la fin de l'axe, et entre les blocs. Cependant, ils ne sont pas égaux, comme on pourrait le penser : les espacements 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.

Exemple . Valeur flex-start

Dans cet exemple, l'axe le long duquel s'effectue l'alignement est orienté de haut en bas, c'est-à-dire qu'il est transversal. Comme on peut le voir sur le résultat obtenu, tous nos éléments sont alignés sur sa partie supérieure :

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

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemple . Valeur flex-end

Dans cet exemple, les blocs sont alignés sur le côté inférieur de l'axe transversal, car la propriété align-content est définie avec la valeur flex-end :

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

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemple . Valeur center

Maintenant les blocs sont alignés au centre de l'axe transversal :

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

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Alignement au début de l'axe vertical dans une grille

Définissons l'alignement de nos éléments dans une grille au début de l'axe vertical :

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

#parent {
	display: grid;
	align-content: start;
	grid-template-columns: 100px 100px;
	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;
}

Alignement au centre de l'axe vertical dans une grille

Maintenant définissons l'alignement des éléments au centre de l'axe vertical :

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

#parent {
	display: grid;
	align-content: center;
	grid-template-columns: 100px 100px;
	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;
}

Alignement à la fin de l'axe vertical dans une grille

Définissons l'alignement des éléments à la fin de l'axe vertical :

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

#parent {
	display: grid;
	align-content: end;
	grid-template-columns: 100px 100px;
	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é justify-content,
qui définit l'alignement le long de l'axe principal
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 éléments flex
la propriété align-self,
qui définit l'alignement d'un seul élément
la propriété place-content,
qui définit l'alignement le long des axes principal et transversal