Ένας πλήρης οδηγός για το Flexbox - CSS-Κόλπα

Ιστορικό

Η Flexbox Layoutενότητα (Flexible Box) (μια πρόταση υποψηφίου του W3C από τον Οκτώβριο του 2017) στοχεύει στην παροχή ενός πιο αποτελεσματικού τρόπου διάταξης, ευθυγράμμισης και διανομής χώρου μεταξύ αντικειμένων σε ένα δοχείο, ακόμα και όταν το μέγεθός τους είναι άγνωστο ή / και δυναμικό (έτσι το λέξη "flex").

Η βασική ιδέα πίσω από την ευέλικτη διάταξη είναι να δοθεί στο κοντέινερ η δυνατότητα να αλλάξει το πλάτος / ύψος των αντικειμένων του (και να παραγγείλει) ώστε να καλύψει καλύτερα τον διαθέσιμο χώρο (κυρίως για να φιλοξενήσει όλα τα είδη συσκευών και μεγεθών οθόνης) Ένα ευέλικτο δοχείο επεκτείνει τα στοιχεία για να γεμίσει τον διαθέσιμο ελεύθερο χώρο ή να τα συρρικνώσει για να αποφευχθεί η υπερχείλιση.

Το πιο σημαντικό, η διάταξη flexbox είναι κατεύθυνση-αγνωστικη σε αντίθεση με την κανονική διάταξη (μπλοκ που βασίζεται σε κάθετη και ενσωματωμένη που βασίζεται σε οριζόντια θέση). Ενώ αυτές λειτουργούν καλά για σελίδες, δεν διαθέτουν ευελιξία (δεν προορίζεται) για την υποστήριξη μεγάλων ή σύνθετων εφαρμογών (ειδικά όταν πρόκειται για αλλαγή προσανατολισμού, αλλαγή μεγέθους, τέντωμα, συρρίκνωση κ.λπ.).

Σημείωση: Η διάταξη του Flexbox είναι πιο κατάλληλη για τα στοιχεία μιας εφαρμογής και για διατάξεις μικρής κλίμακας, ενώ η διάταξη του πλέγματος προορίζεται για διατάξεις μεγαλύτερης κλίμακας.

Βασικά και ορολογία

Δεδομένου ότι το flexbox είναι μια ολόκληρη ενότητα και όχι μια ιδιότητα, περιλαμβάνει πολλά πράγματα, συμπεριλαμβανομένου του συνόλου των ιδιοτήτων της. Μερικά από αυτά προορίζονται να τοποθετηθούν στο δοχείο (γονικό στοιχείο, γνωστό ως "flex container"), ενώ τα άλλα προορίζονται να τοποθετηθούν στα παιδιά (τα εν λόγω "flex στοιχεία").

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

Τα στοιχεία θα καλοστημένο παρακάτω είτε η main axis(από το main-startνα main-end) ή το σταυρό άξονα (από cross-startέως cross-end).

κύριος άξονας - Ο κύριος άξονας ενός εύκαμπτου εμπορευματοκιβωτίου είναι ο πρωτεύων άξονας κατά τον οποίο τοποθετούνται τα ευέλικτα αντικείμενα. Προσοχή, δεν είναι απαραίτητα οριζόντιο. εξαρτάται από την flex-directionιδιοκτησία (δείτε παρακάτω).
κύρια εκκίνηση | main-end - Τα ευέλικτα αντικείμενα τοποθετούνται μέσα στο δοχείο ξεκινώντας από το main-start και πηγαίνοντας στο main-end.
κύριο μέγεθος - Το πλάτος ή το ύψος ενός εύκαμπτου αντικειμένου, όποιο και αν είναι στην κύρια διάσταση, είναι το κύριο μέγεθος του αντικειμένου. Η ιδιότητα κύριου μεγέθους του στοιχείου flex είναι είτε η ιδιότητα «πλάτος» είτε «ύψος», όποιο από τα δύο βρίσκεται στην κύρια διάσταση.
διασταυρούμενος άξονας - Ο άξονας κάθετος προς τον κύριο άξονα ονομάζεται διασταυρούμενος άξονας. Η κατεύθυνσή του εξαρτάται από την κατεύθυνση του κύριου άξονα.
εκκίνηση | cross-end - Οι ευέλικτες γραμμές γεμίζουν με αντικείμενα και τοποθετούνται στο δοχείο ξεκινώντας από την εγκάρσια πλευρά του εύκαμπτου εμπορευματοκιβωτίου και πηγαίνοντας προς την εγκάρσια πλευρά.
διασταυρούμενο μέγεθος - Το πλάτος ή το ύψος ενός εύκαμπτου αντικειμένου, όποιο και αν είναι στη διασταυρούμενη διάσταση, είναι το εγκάρσιο μέγεθος του στοιχείου. Η ιδιότητα διασταυρούμενου μεγέθους είναι όποιο από το «πλάτος» ή το «ύψος» βρίσκεται στην εγκάρσια διάσταση.

Αποκτήστε την αφίσα!

Αναφέρετε πολύ αυτόν τον οδηγό; Καρφιτσώστε ένα αντίγραφο στον τοίχο του γραφείου.

Αγοράστε αφίσα

Ιδιότητες για τον Γονέα
(flex container)

απεικόνιση

Αυτό ορίζει ένα εύκαμπτο δοχείο. inline ή block ανάλογα με τη δεδομένη τιμή. Επιτρέπει ένα ευέλικτο πλαίσιο για όλα τα άμεσα παιδιά του.

.container ( display: flex; /* or inline-flex */ )

Σημειώστε ότι οι στήλες CSS δεν έχουν καμία επίδραση σε ένα κοντέινερ flex.

ευέλικτη κατεύθυνση

Αυτό καθιερώνει τον κύριο άξονα, ορίζοντας έτσι την ευθεία αντικείμενα κατεύθυνσης που τοποθετούνται στο δοχείο flex. Το Flexbox είναι (εκτός από το προαιρετικό περιτύλιγμα) μιας διάταξης μονής κατεύθυνσης. Σκεφτείτε τα ευέλικτα αντικείμενα ως κύρια διάταξη είτε σε οριζόντιες σειρές είτε σε κάθετες στήλες.

.container ( flex-direction: row | row-reverse | column | column-reverse; )

row(προεπιλογή): από αριστερά προς τα δεξιά ltr, δεξιά προς αριστερά μέσαrtl
row-reverse: δεξιά προς τα αριστερά ltr, αριστερά προς τα δεξιά μέσαrtl
column: ίδιο με rowαλλά από πάνω προς τα κάτω
column-reverse: ίδιο με row-reverseαλλά από κάτω προς τα πάνω

flex-wrap

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

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

nowrap (προεπιλογή): όλα τα ευέλικτα στοιχεία θα βρίσκονται σε μία γραμμή
wrap: τα ευέλικτα αντικείμενα θα τυλίγονται σε πολλές γραμμές, από πάνω προς τα κάτω.
wrap-reverse: τα στοιχεία flex θα τυλίγονται σε πολλές γραμμές από κάτω προς τα πάνω.

Υπάρχουν μερικές οπτικές επιδείξεις flex-wrapεδώ.

ευέλικτη ροή

Αυτή είναι μια συντομογραφία για το flex-directionκαι flex-wrapιδιότητες, που μαζί ορίζουν τα βασικά και σταυρό άξονες του flex δοχείου. Η προεπιλεγμένη τιμή είναι row nowrap.

.container ( flex-flow: column wrap; )

δικαιολογήστε-περιεχόμενο

Αυτό καθορίζει την ευθυγράμμιση κατά μήκος του κύριου άξονα. Βοηθά στη διανομή επιπλέον ελεύθερου χώρου που απομένει όταν όλα τα ευέλικτα στοιχεία μιας γραμμής είναι άκαμπτα ή είναι ευέλικτα αλλά έχουν φτάσει στο μέγιστο μέγεθος. Επίσης ασκεί κάποιο έλεγχο στην ευθυγράμμιση των στοιχείων όταν ξεχειλίζουν τη γραμμή.

.container ( justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right… + safe | unsafe; )

flex-start (προεπιλογή): τα αντικείμενα συσκευάζονται προς την αρχή της κατεύθυνσης κάμψης.
flex-end: τα αντικείμενα συσκευάζονται προς το τέλος της κατεύθυνσης κάμψης.
start: τα αντικείμενα συσκευάζονται προς την αρχή της writing-modeκατεύθυνσης.
end: τα αντικείμενα συσκευάζονται προς το τέλος της writing-modeκατεύθυνσης.
left: τα αντικείμενα συσκευάζονται προς την αριστερή άκρη του δοχείου, εκτός εάν αυτό δεν έχει νόημα με το flex-direction, τότε συμπεριφέρεται όπως start.
right: τα αντικείμενα συσκευάζονται προς τη δεξιά άκρη του δοχείου, εκτός εάν αυτό δεν έχει νόημα με το flex-direction, τότε συμπεριφέρεται όπως end.
center: τα αντικείμενα βρίσκονται στο κέντρο κατά μήκος της γραμμής
space-between: τα αντικείμενα κατανέμονται ομοιόμορφα στη γραμμή. το πρώτο στοιχείο είναι στη γραμμή έναρξης, το τελευταίο στοιχείο στην τελική γραμμή
space-around: τα αντικείμενα κατανέμονται ομοιόμορφα στη γραμμή με ίσο χώρο γύρω τους. Σημειώστε ότι οπτικά τα κενά δεν είναι ίδια, αφού όλα τα στοιχεία έχουν ίσο χώρο και στις δύο πλευρές. Το πρώτο στοιχείο θα έχει μία μονάδα διαστήματος απέναντι από την άκρη του κοντέινερ, αλλά δύο μονάδες διαστήματος μεταξύ του επόμενου αντικειμένου, επειδή το επόμενο στοιχείο έχει το δικό του κενό που ισχύει.
space-evenly: τα αντικείμενα κατανέμονται έτσι ώστε η απόσταση μεταξύ οποιωνδήποτε δύο αντικειμένων (και το διάστημα στα άκρα) να είναι ίση.

Σημειώστε ότι η υποστήριξη του προγράμματος περιήγησης για αυτές τις τιμές είναι αποχρωματισμένη Για παράδειγμα, space-betweenδεν λάβατε ποτέ υποστήριξη από ορισμένες εκδόσεις του Edge και η αρχή / τέλος / αριστερά / δεξιά δεν είναι ακόμη στο Chrome. Το MDN έχει λεπτομερή διαγράμματα. Οι πιο ασφαλείς αξίες είναι flex-start, flex-endκαι center.

Υπάρχουν επίσης δύο επιπλέον λέξεις-κλειδιά που μπορείτε να αντιστοιχίσετε με αυτές τις τιμές: safeκαι unsafe. Η χρήση safeδιασφαλίζει ότι, ωστόσο, κάνετε αυτόν τον τύπο τοποθέτησης, δεν μπορείτε να πιέσετε ένα στοιχείο έτσι ώστε να καθιστά εκτός οθόνης (π.χ. από την κορυφή) με τέτοιο τρόπο ώστε το περιεχόμενο να μην μπορεί να μετακινηθεί επίσης (ονομάζεται "απώλεια δεδομένων") .

Στοίχιση-αντικείμενα

Αυτό καθορίζει την προεπιλεγμένη συμπεριφορά για τον τρόπο με τον οποίο τα ευέλικτα αντικείμενα τοποθετούνται κατά μήκος του σταυρού άξονα στην τρέχουσα γραμμή. Σκεφτείτε το ως την justify-contentέκδοση για τον εγκάρσιο άξονα (κάθετο προς τον κύριο άξονα).

.container ( align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end +… safe | unsafe; )

stretch (προεπιλογή): τέντωμα για να γεμίσει το δοχείο (εξακολουθεί να ισχύει το ελάχιστο πλάτος / το μέγιστο πλάτος)
flex-start/ start/ self-start: τα αντικείμενα τοποθετούνται στην αρχή του σταυρού άξονα. Η διαφορά μεταξύ αυτών είναι λεπτή και αφορά τον σεβασμό των flex-directionκανόνων ή των writing-modeκανόνων.
flex-end/ end/ self-end: τα αντικείμενα τοποθετούνται στο τέλος του σταυρού άξονα. Η διαφορά είναι πάλι λεπτή και αφορά τον σεβασμό των flex-directionκανόνων έναντι των writing-modeκανόνων.
center: τα αντικείμενα είναι κεντραρισμένα στον εγκάρσιο άξονα
baseline: τα στοιχεία είναι ευθυγραμμισμένα όπως η ευθυγράμμιση των βασικών γραμμών

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

ευθυγράμμιση περιεχομένου

Αυτό ευθυγραμμίζει τις ευέλικτες γραμμές του εμπορευματοκιβωτίου όταν υπάρχει επιπλέον χώρος στον εγκάρσιο άξονα, παρόμοιος με τον τρόπο justify-contentευθυγράμμισης μεμονωμένων αντικειμένων στον κύριο άξονα.

Σημείωση: Αυτή η ιδιότητα διαρκεί μόνο επίδραση επί πολλαπλών γραμμών εύκαμπτων περιεκτών, όπου flex-flowέχει οριστεί είτε wrapή wrap-reverse). Ένα εύκαμπτο κοντέινερ μίας γραμμής (δηλ. Όπου flex-flowέχει οριστεί στην προεπιλεγμένη τιμή του no-wrap) δεν θα αντικατοπτρίζει align-content.

.container ( align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline +… safe | unsafe; )

normal (προεπιλογή): τα στοιχεία συσκευάζονται στην προεπιλεγμένη θέση τους σαν να μην έχει οριστεί τιμή.
flex-start/ start: αντικείμενα συσκευασμένα στην αρχή του κοντέινερ. Το (πιο υποστηριζόμενο) flex-startτιμά το flex-directionενώ startτιμά την writing-modeκατεύθυνση.
flex-end/ end: είδη συσκευασμένα στο τέλος του δοχείου. Το (περισσότερη υποστήριξη) flex-endτιμά το flex-directionενώ το τέλος τιμά την writing-modeκατεύθυνση.
center: αντικείμενα στο κέντρο του κοντέινερ
space-between: αντικείμενα ομοιόμορφα κατανεμημένα. η πρώτη γραμμή είναι στην αρχή του κοντέινερ, ενώ η τελευταία είναι στο τέλος
space-around: αντικείμενα ομοιόμορφα κατανεμημένα με ίσο χώρο σε κάθε γραμμή
space-evenly: τα αντικείμενα κατανέμονται ομοιόμορφα με ίσο χώρο γύρω τους
stretch: οι γραμμές τεντώνονται για να καταλάβουν τον υπόλοιπο χώρο

Ιδιότητες για τα παιδιά
(ευέλικτα αντικείμενα)

Σειρά

Από προεπιλογή, τα ευέλικτα στοιχεία παρατίθενται στην αρχική σειρά. Ωστόσο, η orderιδιότητα ελέγχει τη σειρά με την οποία εμφανίζονται στο κοντέινερ flex.

.item ( order: 5; /* default is 0 */ )

εύκαμπτη ανάπτυξη

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

Εάν όλα τα αντικείμενα έχουν flex-growοριστεί σε 1, ο υπόλοιπος χώρος στο δοχείο θα διανεμηθεί εξίσου σε όλα τα παιδιά. Εάν ένα από τα παιδιά έχει τιμή 2, το υπόλοιπο διάστημα θα καταλάμβανε διπλάσιο χώρο από τα άλλα (ή θα προσπαθήσει τουλάχιστον).

.item ( flex-grow: 4; /* default 0 */ )

Οι αρνητικοί αριθμοί δεν είναι έγκυροι.

εύκαμπτη συρρίκνωση

Αυτό καθορίζει την ικανότητα συρρίκνωσης ενός εύκαμπτου αντικειμένου εάν είναι απαραίτητο.

.item ( flex-shrink: 3; /* default 1 */ )

Οι αρνητικοί αριθμοί δεν είναι έγκυροι.

ευέλικτη βάση

Αυτό καθορίζει το προεπιλεγμένο μέγεθος ενός στοιχείου πριν διανεμηθεί ο υπόλοιπος χώρος. Μπορεί να είναι μήκος (π.χ. 20%, 5rem κ.λπ.) ή λέξη-κλειδί. Η autoλέξη-κλειδί σημαίνει "κοιτάξτε την ιδιότητα πλάτους ή ύψους μου" (η οποία έγινε προσωρινά από τη main-sizeλέξη-κλειδί μέχρι να καταργηθεί). Τα contentμέσα λέξη-κλειδί «μέγεθος αυτό με βάση το περιεχόμενο του στοιχείου» - αυτή η λέξη-κλειδί δεν είναι καλά υποστηρίζεται ακόμα, γι 'αυτό είναι δύσκολο να δοκιμών και πιο δύσκολο να γνωρίζουμε τι τους αδελφούς του max-content, min-contentκαι fit-contentτο κάνουμε.

.item ( flex-basis: | auto; /* default auto */ )

Εάν οριστεί σε 0, ο επιπλέον χώρος γύρω από το περιεχόμενο δεν λαμβάνεται υπόψη. Εάν οριστεί σε auto, ο επιπλέον χώρος κατανέμεται με βάση την flex-growαξία του. Δείτε αυτό το γραφικό.

καλώδιο

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

.item ( flex: none | ( ? || ) )

Συνιστάται να χρησιμοποιήσετε αυτήν τη στενή ιδιότητα αντί να ορίσετε τις μεμονωμένες ιδιότητες. Η στενογραφία καθορίζει έξυπνα τις άλλες τιμές.

ευθυγραμμίστε τον εαυτό σας

Αυτό επιτρέπει την align-itemsπαράκαμψη της προεπιλεγμένης ευθυγράμμισης (ή εκείνης που καθορίζεται από ) για μεμονωμένα στοιχεία flex.

Ανατρέξτε στην align-itemsεξήγηση για να κατανοήσετε τις διαθέσιμες τιμές.

.item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )

Σημειώστε ότι float, clearκαι vertical-alignδεν έχουν καμία επίδραση σε ένα στοιχείο flex.

Παραδείγματα

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

.parent ( display: flex; height: 300px; /* Or whatever */ ) .child ( width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ )

Αυτό βασίζεται στο γεγονός ότι ένα περιθώριο που έχει οριστεί autoσε ένα εύκαμπτο δοχείο απορροφά επιπλέον χώρο. Έτσι ο καθορισμός ενός κατακόρυφου περιθωρίου autoθα κάνει το αντικείμενο τέλεια κεντραρισμένο και στους δύο άξονες.

Τώρα ας χρησιμοποιήσουμε μερικές ακόμη ιδιότητες. Εξετάστε μια λίστα με 6 στοιχεία, όλα με σταθερές διαστάσεις, αλλά μπορεί να έχει αυτόματο μέγεθος. Θέλουμε να κατανέμονται ομοιόμορφα στον οριζόντιο άξονα, έτσι ώστε όταν αλλάζουμε το μέγεθος του προγράμματος περιήγησης, τα πάντα είναι ωραία και χωρίς ερωτήματα πολυμέσων.

.flex-container ( /* We first create a flex layout context */ display: flex; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Then we define how is distributed the remaining space */ justify-content: space-around; )

Εγινε. Όλα τα άλλα είναι μόνο κάποια ανησυχία για το στυλ. Ακολουθεί ένα στυλό με αυτό το παράδειγμα. Φροντίστε να μεταβείτε στο CodePen και δοκιμάστε να αλλάξετε το μέγεθος των παραθύρων σας για να δείτε τι συμβαίνει.

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

/* Large */ .navigation ( display: flex; flex-flow: row wrap; /* This aligns items to the end line on main-axis */ justify-content: flex-end; ) /* Medium screens */ @media all and (max-width: 800px) ( .navigation ( /* When on medium sized screens, we center it by evenly distributing empty space around items */ justify-content: space-around; ) ) /* Small screens */ @media all and (max-width: 500px) ( .navigation ( /* On small screens, we are no longer using row direction but column */ flex-direction: column; ) )

Ας δοκιμάσουμε κάτι ακόμα καλύτερο παίζοντας με ευελιξία ευέλικτων στοιχείων! Τι γίνεται με μια διάταξη 3 στηλών για κινητά με κεφαλίδα και υποσέλιδο πλήρους πλάτους. Και ανεξάρτητο από την αρχική σειρά.

.wrapper ( display: flex; flex-flow: row wrap; ) /* We tell all items to be 100% width, via flex-basis */ .wrapper> * ( flex: 1 100%; ) /* We rely on source order for mobile-first approach * in this case: * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /* Medium screens */ @media all and (min-width: 600px) ( /* We tell both sidebars to share a row */ .aside ( flex: 1 auto; ) ) /* Large screens */ @media all and (min-width: 800px) ( /* We invert order of first sidebar and main * And tell the main element to take twice as much width as the other two sidebars */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside-2 ( order: 3; ) .footer ( order: 4; ) )

Πρόθεμα Flexbox

Το Flexbox απαιτεί κάποιο πρόθεμα προμηθευτή για την υποστήριξη των περισσότερων δυνατών προγραμμάτων περιήγησης. Δεν περιλαμβάνει μόνο προπαρασκευαστικές ιδιότητες με το πρόθεμα προμηθευτή, αλλά υπάρχουν πραγματικά εντελώς διαφορετικά ονόματα ιδιοκτησίας και τιμής. Αυτό συμβαίνει επειδή η προδιαγραφή Flexbox έχει αλλάξει με την πάροδο του χρόνου, δημιουργώντας μια «παλιά», «tweener» και «νέα» έκδοση.

Ίσως ο καλύτερος τρόπος για να το χειριστείτε αυτό είναι να γράψετε στη νέα (και τελική) σύνταξη και να εκτελέσετε το CSS σας μέσω του Autoprefixer, το οποίο χειρίζεται τα εναλλακτικά πολύ καλά.

Εναλλακτικά, εδώ είναι ένα Sass @mixinγια να βοηθήσετε με ορισμένα από τα προθέματα, το οποίο σας δίνει επίσης μια ιδέα για το τι είδους πράγματα πρέπει να γίνουν:

@mixin flexbox() ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; ) @mixin flex($values) ( -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; ) @mixin order($val) ( -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; ) .wrapper ( @include flexbox(); ) .item ( @include flex(1 200px); @include order(2); )

Σχετικές ιδιότητες

Ένας πλήρης οδηγός για το πλέγμα
Καταχωρίσεις Almanac σε ιδιότητες πλέγματος, όπως πλέγμα-γραμμή / πλέγμα-στήλη

Άλλοι πόροι

Flexbox στις προδιαγραφές CSS
Flexbox στο MDN
Flexbox στο Opera
Κατάδυση στο Flexbox από την Bocoup
Συνδυασμός σύνταξης για καλύτερη υποστήριξη προγράμματος περιήγησης στα CSS-Tricks
Flexbox από τον Raphael Goetter (FR)
Flexplorer από τον Bennett Feely

Σφάλματα

Το Flexbox δεν είναι σίγουρα χωρίς τα σφάλματα του. Η καλύτερη συλλογή από αυτά που έχω δει είναι τα Flexbugs των Philip Walton και Greg Whitworth. Είναι ένα μέρος ανοιχτού κώδικα για να παρακολουθείτε όλα αυτά, γι 'αυτό πιστεύω ότι είναι καλύτερο να συνδεθείτε σε αυτό.

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

Κατανεμημένη από την «έκδοση» του flexbox:

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

Χρώμιο	Σαφάρι	Firefox	ΛΥΡΙΚΗ ΣΚΗΝΗ	ΙΕ	Ακρη	Android	iOS
20- (παλιά) 21+ (νέα)	3.1+ (παλιό) 6.1+ (νέο)	2-21 (παλιά) 22+ (νέα)	12.1+ (νέο)	10 (tweener) 11+ (νέο)	17+ (νέο)	2.1+ (παλιό) 4.4+ (νέο)	3.2+ (παλιό) 7.1+ (νέο)

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