Alignement d'un élément individuel dans le modèle flex en CSS

Les propriétés suivantes que nous allons étudier ne sont plus définies pour le parent des éléments flex, mais pour les éléments eux-mêmes. Examinons la propriété align-self, qui aligne un bloc individuel le long de l'axe transversal.

Prenons des blocs flex disposés en ligne. Alignons-les au centre verticalement, en définissant align-items sur la valeur center, et donnons au deuxième élément une classe supplémentaire elem et pour celui-ci, définissons un alignement différent, par exemple, collons-le au bord supérieur.

Pour cela, à notre élément avec la classe elem définissons la propriété align-self sur la valeur flex-start :

<div class="parent">
	<div class="child">1</div>
	<div class="child elem">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
</div>

.parent {
	display: flex;
	align-items: center;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}
.elem {
	align-self: flex-start;
}

Reproduisez la page selon cet exemple :