Στοίχιση μεμονωμένου στοιχείου στο flex μοντέλο στο CSS

Οι επόμενες ιδιότητες που θα μελετήσουμε, δεν ορίζονται στον γονέα των flex στοιχείων, αλλά στα ίδια τα στοιχεία. Ας εξετάσουμε την ιδιότητα align-self, που στοιχίζει ένα μεμονωμένο μπλοκ κατά τον εγκάρσιο άξονα.

Ας υποθέσουμε ότι έχουμε flex μπλοκ, ταξινομημένα σε μια σειρά. Ας τα στοιχίσουμε στο κέντρο κάθετα, ορίζοντας το align-items στην τιμή center, και στο δεύτερο στοιχείο δίνουμε μια πρόσθετη κλάση elem και για αυτό ορίζουμε μια διαφορετική στοίχιση, για παράδειγμα, ας το τραβήξουμε στην επάνω άκρη.

Για αυτό, στο στοιχείο μας με την κλάση elem θα ορίσουμε την ιδιότητα align-self στην τιμή 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;
}

Επαναλάβετε τη σελίδα σύμφωνα με αυτό το παράδειγμα: