Ιδιότητα order

Η ιδιότητα order ορίζει τη σειρά ακολουθίας ενός μεμονωμένου flex-μπλοκ μέσα σε flex-container. Εφαρμόζεται σε ένα συγκεκριμένο flex μπλοκ.

Ως τιμή, η ιδιότητα δέχεται έναν θετικό ή αρνητικό ακέραιο αριθμό. Όσο μικρότερος είναι ο αριθμός - τόσο νωρίτερα θα τοποθετηθεί το στοιχείο, ανεξάρτητα από τη θέση του στον κώδικα HTML σε σχέση με άλλα στοιχεία.

Σύνταξη

επιλογέας {
	order: θετικός ή αρνητικός αριθμός;
}

Παράδειγμα

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

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
	<div id="elem6">6</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
}
#parent > div {
	border: 1px solid #696989;
	min-width: 100px;
}
#elem1 {
	order: 4;
}
#elem2 {
	order: 5;
}
#elem3 {
	order: 3;
}
#elem4 {
	order: 2;
}
#elem5 {
	order: 1;
}
#elem6 {
	order: -1;
}

Δείτε επίσης

η ιδιότητα flex-direction,
που ορίζει την κατεύθυνση των αξόνων των flex μπλοκ
η ιδιότητα justify-content,
που ορίζει τη στοίχιση κατά μήκος του κύριου άξονα
η ιδιότητα align-items,
που ορίζει τη στοίχιση κατά μήκος του εγκάρσιου άξονα
η ιδιότητα flex-wrap,
που ορίζει την πολυγραμμικότητα των flex μπλοκ
η ιδιότητα flex-flow,
συντομογραφία για τα flex-direction και flex-wrap
η ιδιότητα align-self,
που ορίζει τη στοίχιση ενός μπλοκ
η ιδιότητα flex-basis,
που ορίζει το μέγεθος ενός συγκεκριμένου flex μπλοκ
η ιδιότητα flex-grow,
που ορίζει την "απληστία" των flex μπλοκ
η ιδιότητα flex-shrink,
που ορίζει τη συμπιεστότητα των flex μπλοκ
η ιδιότητα flex,
συντομογραφία για τα flex-grow, flex-shrink και flex-basis