Flex - CSS-Κόλπα

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

Αυτή είναι η συντομογραφία για flex-grow, flex-shrinkκαι flex-basis. Η δεύτερη και η τρίτη παράμετρος ( flex-shrinkκαι flex-basis) είναι προαιρετικές.

Σύνταξη

flex: none | ( ? || ) .flex-item ( /* this */ flex: 1 100px; /* is the same as */ flex-grow: 1; flex-basis: 100px; /* and it leaves the flex-shrink property alone, which would be */ flex-shrink: inherit; /* defaults to 1 */ )

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

flex: none /* value 'none' case */ flex: /* One value syntax, variation 1 */ flex: /* One value syntax, variation 2 */ flex: /* Two values syntax, variation 1 */ flex: /* Two values syntax, variation 2 */ flex: /* Three values syntax */ flex: inherit

Κοινές τιμές για flex

flex: 0 auto;

Αυτό είναι το ίδιο όπως flex: initial;και η συντομογραφία για την προεπιλεγμένη τιμή: flex: 0 1 auto. Το μέγεθος του στοιχείου με βάση τους width/ heightτις ιδιότητες (ή το περιεχόμενό του, αν δεν έχει οριστεί).

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

flex: auto;

Αυτό ισοδυναμεί με flex: 1 1 auto. Προσοχή, αυτή δεν είναι η προεπιλεγμένη τιμή. Το μέγεθος του στοιχείου με βάση τους width/ heightτις ιδιότητες, αλλά καθιστά πλήρως ευέλικτο ώστε να μπορούν να απορροφήσουν επιπλέον χώρο κατά μήκος του κύριου άξονα.

Εάν όλα τα αντικείμενα είναι είτε flex: auto, flex: initialείτε flex: none, ο υπόλοιπος χώρος μετά το μέγεθος των αντικειμένων θα διανεμηθεί ομοιόμορφα στα αντικείμενα με flex: auto.

flex: κανένα;

Αυτό ισοδυναμεί με flex: 0 0 auto. Το μέγεθος του στοιχείου σύμφωνα με τους width/ heightτις ιδιότητες, αλλά καθιστά πλήρως άκαμπτη.

Αυτό είναι παρόμοιο με το flex: initialότι δεν επιτρέπεται να συρρικνωθεί, ακόμη και σε περίπτωση υπερχείλισης.

καλώδιο:

Ισοδύναμο με flex: 1 0px. Κάνει το εύκαμπτο στοιχείο εύκαμπτο και θέτει τη βάση ευελιξίας στο μηδέν, με αποτέλεσμα ένα στοιχείο που λαμβάνει το καθορισμένο ποσοστό του υπόλοιπου χώρου.

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

Διαδήλωση

Η παρακάτω επίδειξη δείχνει μια πολύ απλή διάταξη με το Flexbox χάρη στην flexιδιοκτησία:

Εδώ είναι το εκπληκτικό κομμάτι του κώδικα:

.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )

Αρχικά, έχουμε εξουσιοδοτήσει τα ευέλικτα στοιχεία να εμφανίζονται σε πολλές σειρές με flex-flow: row wrap.

Στη συνέχεια, λέμε τόσο στην κεφαλίδα όσο και στο υποσέλιδο να πάρουν το 100% του τρέχοντος πλάτους της θύρας προβολής, ανεξάρτητα από το τι.

Και το κύριο περιεχόμενο και οι δύο πλευρικές γραμμές θα μοιράζονται την ίδια σειρά, μοιράζοντας τον υπόλοιπο χώρο ως εξής: 66% (2 / (1 + 2)) για το κύριο περιεχόμενο, 33% (1 / (1 + 2)) για την πλευρική γραμμή .

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

• (σύγχρονο) σημαίνει την πρόσφατη σύνταξη από την προδιαγραφή (π.χ. display: flex;)
• (υβριδικό) σημαίνει μια περίεργη ανεπίσημη σύνταξη από το 2011 (π.χ. display: flexbox;)
• (παλιά) σημαίνει την παλιά σύνταξη από το 2009 (π.χ. display: box;)

Χρώμιο	Σαφάρι	Firefox	ΛΥΡΙΚΗ ΣΚΗΝΗ	ΙΕ	Android	iOS
21+ (μοντέρνα) 20- (παλιά)	3.1+ (παλιά)	2-21 (παλιά) 22+ (νέα)	12.1+ (μοντέρνο)	10+ (υβριδικό)	2.1+ (παλιά)	3.2+ (παλιά)

Το πρόγραμμα περιήγησης Blackberry 10+ υποστηρίζει τη νέα σύνταξη.

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