Flex-wrap - CSS-Κόλπα

Η flex-wrapιδιότητα είναι δευτερεύουσα ιδιοκτησία της μονάδας Flexible Box Layout.

Καθορίζει εάν τα ευέλικτα στοιχεία υποχρεώνονται σε μία γραμμή ή μπορούν να ρέουν σε πολλές γραμμές. Εάν οριστεί σε πολλές γραμμές, ορίζει επίσης τον εγκάρσιο άξονα που καθορίζει την κατεύθυνση στοίβαξης των νέων γραμμών.

Υπενθύμιση: ο σταυρός άξονας είναι ο άξονας κάθετος προς τον κύριο άξονα. Η κατεύθυνσή του εξαρτάται από την κατεύθυνση του κύριου άξονα.

Η flex-wrapιδιοκτησία δέχεται 3 διαφορετικές τιμές:

• nowrap( προεπιλογή ): μονή γραμμή που μπορεί να προκαλέσει υπερχείλιση του κοντέινερ
• wrap: πολλαπλές γραμμές, η κατεύθυνση καθορίζεται από flex-direction
• wrap-reverse: πολλαπλές γραμμές, απέναντι από την κατεύθυνση που ορίζεται από flex-direction

Σύνταξη

flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )

Διαδήλωση

Στην ακόλουθη επίδειξη:

• Η κόκκινη λίστα έχει οριστεί σε nowrap
• Η κίτρινη λίστα έχει οριστεί σε wrap
• Η μπλε λίστα έχει οριστεί σε wrap-reverse

Σημείωση: η flex-directionέχει οριστεί στην προεπιλεγμένη τιμή: row.

Δείτε το Pen Flex-wrap: demo από CSS-Tricks (@ css-tricks) στο CodePen.

Υποστήριξη προγράμματος περιήγησης

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

Επιφάνεια εργασίας

Χρώμιο	Firefox	ΙΕ	Ακρη	Σαφάρι
21 *	28	11	12	6.1 *

Κινητό / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	4.4	7.0-7.1 *

Για περισσότερες πληροφορίες σχετικά με το πώς να συνδυάσετε σύνταξη προκειμένου να λάβετε την καλύτερη υποστήριξη προγράμματος περιήγησης, ανατρέξτε σε αυτό το άρθρο (CSS-Tricks) ή σε αυτό το άρθρο (DevOpera).