Ιδιότητα flex-wrap

Η ιδιότητα flex-wrap ορίζει την πολυγραμμική τοποθέτηση μπλοκ κατά μήκος του κύριου άξονα. Εφαρμόζεται στο γονικό στοιχείο για flex μπλοκ. Περιλαμβάνεται στην συντομογραφία ιδιότητας flex-flow.

Σύνταξη

επιλογέας {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

Τιμές

Τιμή	Περιγραφή
`nowrap`	Μονογραμμική λειτουργία - τα μπλοκ ταξινομούνται σε μία γραμμή.
`wrap`	Τα μπλοκ ταξινομούνται σε πολλές γραμμές, εάν δεν χωρούν σε μία.
`wrap-reverse`	Το ίδιο με το `wrap`, αλλά τα μπλοκ ταξινομούνται με αντίστροφη σειρά (πρώτα το τελευταίο, μετά το πρώτο).

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

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

Τώρα τα μπλοκ δεν χωρούν στον κοντέινερ τους και θα ταξινομηθούν σε πολλές γραμμές:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

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

Και τώρα η σειρά ακολουθίας θα αλλάξει σε αντίστροφη (παρατηρήστε τους αριθμούς μέσα στα μπλοκ):

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap-reverse;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

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

Τώρα τα μπλοκ θα τοποθετηθούν σε μονογραμμική λειτουργία (έτσι από προεπιλογή). Σε αυτή την περίπτωση η τιμή πλάτους width για τα μπλοκ θα αγνοηθεί, εάν εμποδίζει τα μπλοκ να χωρέσουν στο γονικό. Παρατηρήστε ότι τα μπλοκ χώρεσαν στο γονικό, αλλά το πραγματικό τους πλάτος δεν είναι 100px, όπως έχει οριστεί, αλλά μικρότερο:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

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

Ωστόσο, εάν τα μπλοκ χωρούν με το καθορισμένο πλάτος - τότε η ιδιότητα width δεν θα αγνοηθεί. Ας μειώσουμε τον αριθμό των μπλοκ ώστε να χωρέσουν όλα:

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

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Δείτε επίσης

ιδιότητα flex-direction,
που ορίζει την κατεύθυνση των αξόνων των flex μπλοκ
ιδιότητα justify-content,
που ορίζει την στοίχιση κατά μήκος του κύριου άξονα
ιδιότητα align-items,
που ορίζει την στοίχιση κατά μήκος του εγκάρσιου άξονα
ιδιότητα 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