Η σειρά των flex μπλοκ στο CSS

Ας υποθέσουμε ότι έχουμε τα ακόλουθα μπλοκ, ταξινομημένα σε μια σειρά:

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

.parent {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}

Ας αλλάξουμε τη σειρά εμφάνισής τους στην οθόνη, χωρίς να αλλάξουμε τη σειρά τους στον κώδικα HTML.

Για αυτό υπάρχει η ιδιότητα order, που ορίζει τη σειρά των συγκεκριμένων στοιχείων σύμφωνα με τον ακόλουθο κανόνα: όσο μεγαλύτερη είναι η τιμή, τόσο πιο κοντά βρίσκεται στο τέλος του άξονα, ενώ όσο μικρότερη είναι - τόσο πιο κοντά βρίσκεται στην αρχή.

Η τιμή της ιδιότητας μπορεί να είναι θετικός ή αρνητικός αριθμός. Από προεπιλογή, όλα τα στοιχεία ακολουθούν το ένα το άλλο, αυτό σημαίνει ότι το order τους είναι μηδέν.

Ας αλλάξουμε τη σειρά των στοιχείων μας. Για αυτό, θα ορίσουμε στο δεύτερο στοιχείο μια επιπλέον κλάση elem και για αυτήν την κλάση θα ορίσουμε την ιδιότητα order στην τιμή 1:

.elem {
	order: 1;
	border: 1px solid red;
}

Εφόσον όλα τα στοιχεία από προεπιλογή θα έχουν σειρά 0, ενώ το δεύτερο στοιχείο μας θα έχει σειρά μεγαλύτερη από τα υπόλοιπα, τότε θα τοποθετηθεί μετά από αυτά:

Ας ορίσουμε τώρα μια αρνητική τιμή -1:

.elem {
	order: -1;
	border: 1px solid red;
}

Σε αυτήν την περίπτωση, το μπλοκ μας θα μετακινηθεί στην αρχή του άξονα:

Δοκιμάστε μόνοι σας τη λειτουργία αυτής της ιδιότητας για διάφορες κατευθύνσεις του άξονα.