Propriété align-items

La propriété align-items définit l'alignement des éléments le long de l'axe transversal pour les flexbox et sur l'axe vertical pour les grilles. S'applique à l'élément parent.

Syntaxe

sélecteur {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

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 sur l'axe transversal (vertical).
`baseline`	Les éléments sont alignés sur leur ligne de base. La ligne de base est une ligne imaginaire passant par le bord inférieur des caractères sans tenir compte des descendantes, comme pour les lettres `'p'` et `'y'`.
`stretch`	Les blocs sont étirés pour occuper tout l'espace disponible sur l'axe transversal, tout en respectant `min-width` et `max-width`, s'ils sont définis. Si la largeur et la hauteur sont définies pour les éléments - `stretch` sera ignoré.

Valeur par défaut : stretch.

Exemple . Valeur stretch

Actuellement, l'axe principal est dirigé de gauche à droite, et sur l'axe transversal, les éléments sont étirés sur toute la hauteur :

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Exemple . Valeur stretch + dimensions de l'élément

Actuellement, la largeur et la hauteur sont définies pour les éléments, donc la valeur stretch pour la propriété align-items sera ignorée :

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemple . Valeur flex-start sans dimensions de l'élément

Actuellement, les éléments seront alignés en haut :

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Exemple . Valeur flex-start + dimensions de l'élément

Actuellement, les éléments seront toujours alignés en haut, mais ils auront une largeur et une hauteur définies :

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

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

Exemple . Valeur flex-end + dimensions de l'élément

Actuellement, les éléments seront alignés en bas :

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

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

Exemple . Valeur center + dimensions de l'élément

Actuellement, les éléments seront centrés sur l'axe transversal (dans ce cas, verticalement) :

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

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

Exemple . Valeur center, éléments de tailles différentes

Actuellement, les éléments ont des tailles différentes en hauteur (actuellement, ils s'étendent avec le texte, mais on peut définir height), la largeur est la même pour tous, car la propriété width est définie :

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

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

Exemple . Valeur baseline, éléments de tailles différentes

Voici à quoi ressemble l'alignement sur la ligne de base :

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

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	border: 1px solid #696989;
}

Exemple . Alignement au début de l'axe vertical dans la grille

Alignons nos éléments dans les cellules au début de l'axe vertical :

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

#parent {
	display: grid;
	align-items: flex-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;
}

Regardons maintenant notre grille dans l'inspecteur du navigateur :

Exemple . Alignement au centre de l'axe vertical dans la grille

Alignons maintenant nos éléments dans les cellules au centre de l'axe vertical :

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

#parent {
	display: grid;
	align-items: 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;
}

Regardons l'affichage de la grille dans l'inspecteur :

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

Modifions à nouveau l'alignement des éléments, cette fois à la fin de l'axe vertical :

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

#parent {
	display: grid;
	align-items: 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;
}
#elem1 {
	
}

Voyons maintenant à quoi ressemble notre grille via l'inspecteur :

Voir aussi

la propriété flex-direction,
qui définit la direction des axes des flexbox
la propriété justify-content,
qui définit l'alignement sur l'axe principal
la propriété align-items,
qui définit l'alignement sur l'axe transversal
la propriété flex-wrap,
qui définit le retour à la ligne des flexbox
la propriété flex-flow,
raccourci pour flex-direction et flex-wrap
la propriété order,
qui définit l'ordre des flexbox
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 flexbox spécifique
la propriété flex-grow,
qui définit l'expansion des flexbox
la propriété flex-shrink,
qui définit la réduction des flexbox
la propriété flex,
raccourci pour flex-grow, flex-shrink et flex-basis