Ιδιότητα flex-direction

Η ιδιότητα flex-direction καθορίζει την κατεύθυνση του κύριου και του εγκάρσιου άξονα ή, με άλλα λόγια, τοποθετεί τα στοιχεία σε σειρά ή σε στήλη.

Εφαρμόζεται στο γονικό στοιχείο για flex μπλοκ. Περιλαμβάνεται στη σύντομη ιδιότητα flex-flow.

Σύνταξη

επιλογέας {
	flex-direction: row | row-reverse | column | column-reverse;
}

Τιμές

Τιμή	Περιγραφή
`row`	Ο κύριος άξονας κατευθύνεται από αριστερά προς τα δεξιά. Τα στοιχεία τοποθετούνται σε σειρά, από προεπιλογή είναι σφιγμένα στην αριστερή άκρη, η αρίθμησή τους έχει την κανονική σειρά - από αριστερά προς τα δεξιά.
`row-reverse`	Ο κύριος άξονας κατευθύνεται από δεξιά προς τα αριστερά. Τα στοιχεία τοποθετούνται σε σειρά, από προεπιλογή είναι σφιγμένα στην δεξιά άκρη, η αρίθμησή τους έχει αντίστροφη σειρά - από δεξιά προς τα αριστερά.
`column`	Ο κύριος άξονας κατευθύνεται από πάνω προς τα κάτω. Τα στοιχεία τοποθετούνται σε στήλη, από προεπιλογή είναι σφιγμένα στην κορυφή, η αρίθμησή τους έχει την κανονική σειρά - από πάνω προς τα κάτω.
`column-reverse`	Ο κύριος άξονας κατευθύνεται από κάτω προς τα πάνω. Τα στοιχεία τοποθετούνται σε στήλη, από προεπιλογή είναι σφιγμένα στον πάτο, η αρίθμησή τους έχει αντίστροφη σειρά - από κάτω προς τα πάνω.

Προεπιλεγμένη τιμή: row.

Παράδειγμα

Τα στοιχεία τοποθετούνται σε σειρά, από προεπιλογή σφιγμένα στην αριστερή άκρη, η αρίθμησή τους έχει κανονική σειρά - από αριστερά προς τα δεξιά:

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

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

Παράδειγμα . Τιμή row-reverse

Τα στοιχεία τοποθετούνται σε σειρά, από προεπιλογή σφιγμένα στην δεξιά άκρη, η αρίθμησή τους έχει αντίστροφη σειρά - από δεξιά προς τα αριστερά:

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

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

Παράδειγμα . Τιμή column

Τα στοιχεία τοποθετούνται σε στήλη, από προεπιλογή σφιγμένα στην κορυφή, η αρίθμησή τους έχει κανονική σειρά - από πάνω προς τα κάτω:

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

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

Παράδειγμα . Τιμή column-reverse

Τα στοιχεία τοποθετούνται σε στήλη, από προεπιλογή σφιγμένα στον πάτο, η αρίθμησή τους έχει αντίστροφη σειρά - από κάτω προς τα πάνω:

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

#parent {
	flex-direction: column-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Δείτε επίσης

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