Επιτρέψτε μου να το πω πρώτα: το flexbox είναι εύκολο. Είτε πρόκειται για θέματα πρώιμης υιοθεσίας, είτε διότι μάθαμε να σκέφτονται όσον αφορά τους πλωτήρες και τα μπλοκ, συχνά ακούω από τους σχεδιαστές ιστοσελίδων ότι πιστεύουν ότι το Flexbox είναι πολύπλοκο για να το εφαρμόσει. Αλλά επαναλαμβάνω: το flexbox είναι εύκολο.
Υπάρχει ένα τέχνασμα για την κατανόηση του flexbox που θα σας διδάξω, μετά από το οποίο όλα θα είναι ξεκάθαρα. Αλλά πρώτα, θέλω να μιλήσω για το τι είναι το flexbox.
Flexbox (ή το Ευέλικτη μονάδα διάταξης κουτιού για να το δώσετε στο σωστό του όνομα) είναι ένα σύνολο ιδιοτήτων CSS που συνδυάζονται για να παρουσιάσουν το περιεχόμενο με τρόπο που να ανταποκρίνεται.
Το Flexbox είναι η πρώτη τεχνική διάταξης CSS που λειτουργεί για τον σύγχρονο ιστό. Είναι δίκαιο να πούμε ότι έως ότου υποστηριχθεί το flexbox, δεν υπήρχε τεχνική σχεδίασης που να λειτουργεί καλά με την ικανοποιητική σχεδίαση ιστοσελίδων.
Άφθονα αχόλια έχουν επιπλέει γύρω, όπως τα στοιχεία ρύθμισης για την εμφάνιση: inline-block και επιτρέποντάς τους να τυλίξουν. Ωστόσο, αυτό παρουσίασε ορισμένα προβλήματα για ευέλικτες τοποθεσίες, μεταξύ των οποίων και η έλλειψη ελέγχου και η επιρροή των στοιχείων με την αλλαγή μεγέθους. Για το λόγο αυτό, πολλοί ιστοτόποι που ανταποκρίνονται εξακολουθούν να χρησιμοποιούν το JavaScript για να τοποθετήσουν το περιεχόμενο.
Το Flexbox περιγράφεται από το W3C ως προοριζόμενο για την τοποθέτηση στοιχείων UI-πράγματα όπως τα στοιχεία του μενού-δεν προορίζεται για τη διαμόρφωση ολόκληρων σελίδων.
Ο λόγος που δεν προορίζεται για τη διαμόρφωση ολόκληρων σελίδων, είναι ότι το flexbox έχει μια συνιστώσα CSS module, το Μονάδα διαμόρφωσης πλέγματος που προορίζεται για διάταξη. Η διάταξη του πλέγματος θεωρείται ως η καταλληλότερη τεχνική για τις διατάξεις πλήρους σελίδας. Δυστυχώς υπάρχει πολύ περιορισμένη υποστήριξη για το δίκτυο στην παρούσα φάση και με "περιορισμένη" εννοώ "καμία". Ακόμη και η τελευταία έκδοση του Chrome δεν τη υποστηρίζει χωρίς σημαίες.
Ευτυχώς η υποστήριξη του προγράμματος περιήγησης για το flexbox είναι πολύ πιο ολοκληρωμένη. Και επειδή λύνει τόσα πολλά σύγχρονα προβλήματα διαμόρφωσης, το flexbox είναι ένα ιδανικό εργαλείο μέχρι να εγκριθεί τελικά το πλέγμα.
Το Flexbox είναι ιδανικό για το στυλ των στοιχείων σε μια σελίδα. Η πραγματική ισχύς του flexbox, και ο λόγος που λειτουργεί πολύ καλύτερα από άλλες επιλογές διάταξης, προέρχεται από τη δήλωση στυλ σε ομάδες αντικειμένων αντί για ξεχωριστά αντικείμενα.
Όταν πρόκειται για διάταξη, σπανίως πρέπει να τοποθετήσουμε ένα μόνο στοιχείο - αν σχεδιάζουμε να το κάνουμε αυτό, είναι πολύ καλύτερο να χρησιμοποιήσουμε την τοποθέτηση. Το Flexbox λειτουργεί καλύτερα όταν ελέγχει τον τρόπο με τον οποίο οι ομάδες στοιχείων σχετίζονται μεταξύ τους.
Σχεδιάστε πάντα ένα πράγμα, εξετάζοντάς το στο επόμενο ευρύτερο περιβάλλον - μια καρέκλα σε ένα δωμάτιο, ένα δωμάτιο σε ένα σπίτι, ένα σπίτι σε ένα περιβάλλον, ένα περιβάλλον σε ένα σχέδιο πόλης. - Ελιέλ Σααρίνεν
Ως εκ τούτου, η προδιαγραφή flexbox χωρίζεται σε δύο μέρη, ένα σύνολο ιδιοτήτων που αναφέρονται στο στοιχείο του δοχείου και ένα σύνολο ιδιοτήτων που αναφέρονται στα στοιχεία εντός.
Η υποστήριξη του προγράμματος περιήγησης είναι συνήθως μια πολύπλοκη ερώτηση. Έχει γίνει όλο και πιο περίπλοκο για το flexbox επειδή το flexbox έχει πολλές διαφορετικές συνταγές. Η πρώιμη αναποφασιστικότητα, η ανεξάρτητη ανάπτυξη από ορισμένους προμηθευτές προγραμμάτων περιήγησης και μια επαναληπτική διαδικασία μας άφησαν πολλές διαφορετικές εκδόσεις του flexbox, που όλοι πρέπει να ικανοποιηθούν.
Ευτυχώς, με την προσθήκη ορισμένων προθεμάτων του προγράμματος περιήγησης για παλαιότερα προγράμματα περιήγησης, μπορούμε τώρα να το επικαλεστούμε. Σύμφωνα με caniuse.com , των τρέχοντα mainstream browsers μόνο το IE9 θα παρουσιάσει ένα πρόβλημα για εμάς.
Ευτυχώς, όπως όλα τα CSS, αν το flexbox αποτύχει, αποτυγχάνει σιωπηλά. Αυτό σημαίνει ότι το IE9 θα το αγνοήσει.
Χάρη σε μια συγκλονιστική έλλειψη συνεργασίας μεταξύ διαφόρων κλάδων των επιτροπών και των επιχειρήσεων, η εφαρμογή του flexbox έχει σχεδόν ισοπεδώσει το χάος των αρχών του '00 όταν κάθε φυλλομετρητής υλοποίησε κάθε ιδιοκτησία μοναδικά και εσφαλμένα ταυτόχρονα. Παρέχοντας σε όλους όφελος από την αμφιβολία, οι τρεις υλοποιήσεις του flexbox ήταν απλώς μια επαναληπτική προσέγγιση που οδήγησε στην πιο χρήσιμη κοινή λύση.
Υπάρχουν τρεις εκδόσεις της σύνταξης flexbox που πρέπει να γνωρίζετε: παλιές, ενδιάμεσες και νέες. Τα διαφορετικά προγράμματα περιήγησης υποστηρίζουν διαφορετικές συνταγές, για παράδειγμα το IE10 υποστηρίζει τη σύνθετη σύνταξη.
Ακριβώς όπως τα προθέματα του προγράμματος περιήγησης, γράφουμε τη σύνταξη Flexbox από παλαιότερα σε νεώτερη, έτσι ώστε η πιο πρόσφατη υποστηριζόμενη σύνταξη να υπερισχύει των παλαιότερων συντακτικών.
Για παράδειγμα, γράφουμε την οθόνη: flex όπως έτσι:
display:-webkit-box; /*old prefixed for webkit*/display:-moz-box; /*old prefixed for mozilla*/display:-ms-flexbox; /*inbetween prefixed for ie*/display:-webkit-flex; /*new prefixed for webkit*/display:flex; /*new*/Για λόγους σαφήνειας, δεν πρόκειται να βουτήξω στις παλαιότερες συνταγές ή να συζητήσω για τα πλεονεκτήματα των προ-επεξεργαστών, των μετα-επεξεργαστών και των διαφορετικών σεναρίων μετατροπής. Σε όλα τα παραδείγματα μου πρόκειται να χρησιμοποιήσω τη σωστή, νέα σύνταξη.
Όταν πρόκειται για κώδικα παραγωγής, χρησιμοποιώ μια σειρά Sins mixins για να επεκτείνω την υποστήριξη flexbox σε παλαιότερα προγράμματα περιήγησης.
Υπάρχει μια εξαιρετική Sass mixin εδώ , την οποία μπορείτε είτε να χρησιμοποιήσετε για να εμποδίσετε τον κωδικό σας να φουσκώνει, είτε να εξαγάγετε τη σύνταξη της κληρονομιάς.
Το μυστικό του flexbox, είναι ότι δεν είναι κουτί καθόλου. Μέχρι τώρα, όλη η διάταξη στο Web χρησιμοποίησε καρτεσιανό σύστημα των x και y, για να σχεδιάσουμε σημεία. Το Flexbox, αντίθετα, είναι ένας φορέας.
Ακούγεται υπέροχο, έτσι; Το Flexbox είναι ένας φορέας, δηλαδή ορίζουμε ένα μήκος και ορίζουμε μια γωνία. Μπορούμε να αλλάξουμε τη γωνία, χωρίς να επηρεάσουμε το μήκος. και μπορούμε να αλλάξουμε το μήκος, χωρίς να επηρεάσουμε τη γωνία.
Αυτή η νέα προσέγγιση σημαίνει ότι κάποια ορολογία του flexbox είναι αρχικά πολύπλοκη. Για παράδειγμα, όταν ευθυγραμμίζουμε αντικείμενα στην κορυφή ενός κάδου flex, χρησιμοποιούμε το flex-start, όχι την κορυφή -γιατί αν αλλάξουμε τον προσανατολισμό, το flex-start θα εξακολουθεί να ισχύει, αλλά το top δεν θα είναι.
Μόλις κατανοήσετε αυτήν την προσέγγιση, μεγάλο μέρος του flexbox απομυθοποιείται.
Η σύνταξη του Flexbox χωρίζεται σε δύο ομάδες: εκείνες τις ιδιότητες που ελέγχουν το κοντέινερ και εκείνες τις ιδιότητες που ελέγχουν τους άμεσους απογόνους του κοντέινερ. Το πρώτο είναι το πιο χρήσιμο, οπότε ας αρχίσουμε εκεί.
Ας υποθέσουμε ότι θέλουμε να διαχωρίσουμε αντικείμενα μέσα σε ένα μπλοκ. Τους θέλουμε να τοποθετηθούν ομοιόμορφα. Χρησιμοποιώντας το flexbox είναι πραγματικά εύκολο να το κάνετε. Το πρώτο πράγμα που χρειαζόμαστε είναι κάποια σήμανση για να το δοκιμάσετε:
Flexbox Layout Είναι ένα απλή σελίδα HTML , με ένα σπίτι div, που περιλαμβάνει πέντε διαμερίσματα δωματίων, το καθένα από τα οποία έχει μια τάξη που προσδιορίζει τη λειτουργία τους, κουζίνα, τουαλέτα, σαλόνι, και υπνοδωμάτιο.
Αυτό που θα κάνουμε είναι να ρυθμίσετε το σπίτι να είναι ένα δοχείο flexbox. Όλες οι ιδιότητες flexbox που θέτουμε στο σπίτι θα εφαρμοστούν στη συνέχεια στα παιδιά του (το δωμάτιο s).
Προκειμένου να σχεδιάσουμε το δωμάτιο πρέπει πρώτα να δηλώσουμε το σπίτι ως δοχείο flexbox και, στη συνέχεια, να το πούμε πώς θέλουμε να οργανωθούν τα στοιχεία του παιδιού.
Για να δηλώσουμε το σπίτι σαν ένα κιβώτιο flexbox χρησιμοποιούμε τον ακόλουθο κώδικα:
.house {background:#FF5651;display:flex;}Και αυτό είναι. Δημιουργήσαμε ένα ευέλικτο κιβώτιο. Το μόνο που πρέπει να κάνουμε τώρα είναι να πείτε στο flexbox πώς να σχεδιάσετε το δωμάτιο . Μπορούμε να το κάνουμε αυτό χρησιμοποιώντας την ιδιότητα justify-content .
justify-content έχει πέντε πιθανές τιμές: κέντρο, flex-start, flex-end, space-around και space-between. Αυτά κεντράρονται τα στοιχεία, ευθυγραμμίζονται με την αρχή (η οποία είναι είτε επάνω είτε αριστερά, όπως θα συζητήσουμε παρακάτω), το τέλος (το οποίο είναι είτε το κάτω είτε το δεξί), τα διαχωρίζει με ίσο χώρο γύρω από κάθε στοιχείο ή με ίσο διάστημα μεταξύ κάθε στοιχείου, αντίστοιχα.
Θα χρησιμοποιήσουμε χώρο γύρω από:
.house {background:#FF5651;display:flex;justify-content: space-around;}Εδώ είναι ένα demo . Παρατηρήστε πώς υπάρχει διπλάσιος χώρος μεταξύ των αντικειμένων, όπως υπάρχει στις δύο εξωτερικές άκρες; Αυτό συμβαίνει επειδή κάθε στοιχείο έχει τον ίδιο χώρο προς τα αριστερά και προς τα δεξιά. Εάν είχαμε χρησιμοποιήσει χώρο - αντίθετα δεν θα υπήρχε χώρος στα άκρα.
Δεν είμαι σίγουρος για σας, αλλά το μπάνιο στο σπίτι μου είναι λίγο μικρότερο από το σαλόνι, και παρόλο που έχω μια μικρή κουζίνα, θα ήθελα πολύ πιο μεγάλη. Ας κάνουμε κάποιες προσθήκες στον κώδικα μας για να αναλογιστούμε ότι:
.kitchen {width:300px;height:300px;}.washroom {width:45px;height:60px;}Όπως βλέπετε αυτό το παράδειγμα , τα δωμάτια μας εξακολουθούν να είναι ομοιόμορφα κατανεμημένα. Παρόλο που έχουμε αλλάξει το μέγεθος. Το Flexbox είναι εξαιρετικό για την οργάνωση περιεχομένου.
Όπως συζητήσαμε παραπάνω, ένας από τους λόγους για τους οποίους το flexbox λειτουργεί τόσο καλά για τους σχεδιαστές είναι ότι περιγράφεται ως φορέας. Προς το παρόν, το flexbox υποστηρίζει μόνο τέσσερις γωνίες: 0, 90, 180 και 270 μοίρες. Έτσι είναι πολύ απλούστερο να τους θεωρήσουμε ως έναν άξονα.
Για να αλλάξουμε τον άξονα, χρησιμοποιούμε την ιδιότητα κατεύθυνσης ευκαμψίας , η οποία έχει τέσσερις πιθανές τιμές: σειρά (η προεπιλογή - όπως μπορείτε να δείτε στα παραπάνω παραδείγματα, τα δωμάτιά μας είναι τοποθετημένα από αριστερά προς τα δεξιά), row-reverse, στήλη και στήλη-αντίστροφη.
Αν αλλάξουμε την καμπύλη προς τη στήλη, θα δείτε σε αυτό το demo ότι τα δωμάτια βρίσκονται τώρα κατακόρυφα, από πάνω προς τα κάτω:
.house {background:#FF5651;display:flex;justify-content: space-around;flex-direction:column;}Όπως είμαι βέβαιος ότι μπορείτε να μαντέψετε, η σειρά-αντίστροφη και η αντίστροφη στήλη αντιστρέφουν τη σειρά των αντικειμένων στο εύκαμπτο δοχείο.
Θα παρατηρήσετε στο τελευταίο παράδειγμα ότι ενώ το σπίτι εκτείνεται σε όλο το διάδρομο προβολής, τεντώνεται σε όλο το ύψος, ακόμα και όταν έχει ρυθμιστεί σε κατεύθυνση ευκαμψίας: στήλη.
Προκειμένου να παίξει ωραία το σύστημα συντεταγμένων με βάση το καρτεσιανό σύστημα CSS, το εμπορευματοκιβώτιο flexbox αντιμετωπίζεται ως στοιχείο επιπέδου μπλοκ.
Ακριβώς όπως το display: block έχει μια συνοδευτική οθόνη: inline-block, έτσι ώστε να εμφανίζεται: το flex έχει οθόνη: inline-flex.
Το inline-flex είναι προς το παρόν πιο χρήσιμο αν απομακρύνετε τα στοιχεία flexbox σε μια υπάρχουσα διάταξη και θα πρέπει να παίξετε ωραία με πλωτήρες και τοποθετημένα στοιχεία.
Όπως είδαμε, το flexbox δεν έχει καμία σημασία αν οριοθετεί οριζόντια ή κάθετα, όποια κατεύθυνση επιλέγετε θεωρείται ως ο κύριος άξονας του flexbox.
Αλλά το flexbox μας επιτρέπει επίσης να ελέγξουμε τη θέση κατά μήκος του αντίθετου δευτερεύοντος άξονα.
Η θέση στον δευτερεύοντα άξονα ελέγχεται από την ιδιότητα align-items . έχει πέντε πιθανές τιμές: βασική, κεντρική, ευέλικτη, ευέλικτη εκκίνηση και τέντωμα.
η βασική γραμμή θα είναι συνήθως η πιο χρήσιμη επιλογή. Εξασφαλίζει ότι οι βασικές γραμμές του κειμένου ευθυγραμμίζονται. Για να το δοκιμάσουμε, πρέπει να κάνουμε κάποιες τροποποιήσεις στο αρχείο HTML:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomΘα δείτε ότι έχω προσθέσει κάποιο κείμενο και εισήγαγα και έπειτα εφάρμοσε μια γραμματοσειρά Google. Έχω επίσης αλλάξει το μέγεθος γραμματοσειράς στην κουζίνα και στο μπάνιο, οπότε υπάρχει μια σαφής διάκριση.
Όταν ορίσουμε την ιδιότητα " ευθυγράμμιση-στοιχεία" στη βασική γραμμή θα δείτε σε αυτό το demo ότι η γραμμή βάσης του κειμένου ταιριάζει.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;}ευθυγραμμισμένα στοιχεία: το κεντρικό κέντρο ευθυγραμμίζεται είτε κάθετα (αν κατεύθυνση ευθυγράμμισης : σειρά ή καμπύλη κατεύθυνσης: σειρά-αντίστροφη ) ή οριζόντια (αν κατεύθυνση ευκαμψίας: στήλη ή καμπύλη κατεύθυνση: στήλη-αντίστροφη ). Εδώ είναι ένα demo.
ευθυγραμμισμένα αντικείμενα: το flex-start ευθυγραμμίζεται στην κορυφή και τα στοιχεία ευθυγράμμισης: το flex-end ευθυγραμμίζεται προς τα κάτω (αν κατεύθυνση ευθυγράμμισης : γραμμή ή καμπύλη κατεύθυνσης: σειρά-αντίστροφη ) ή προς τα αριστερά και προς τα δεξιά ευέλικτη κατεύθυνση: στήλη ή καμπύλη κατεύθυνσης: στήλη-ανάστροφη ). Εδώ είναι ένα demo.
stretch, είναι μια άλλη εξαιρετικά χρήσιμη επιλογή. stretch θα αλλάξει το μέγεθος των αντικειμένων, έτσι ώστε το καθένα να έχει το ίδιο ύψος (θα αυξηθεί, δεν θα συρρικνωθεί). Εδώ είναι ένα demo.
Στα άλλα παραδείγματα, έχουμε καθορίσει ρητά το ύψος των στοιχείων, το οποίο είναι αρκετό για να αντικαταστήσει το flexbox, έτσι ώστε να δείτε τα στοιχεία ευθυγράμμισης: η εργασία τεντώματος σωστά θα χρειαστεί να αφαιρέσετε το ύψος από όλες τις κλάσεις εκτός από μία.
Μέχρι στιγμής έχουμε χρησιμοποιήσει το flexbox σε στοιχεία σχεδίασης έτσι ώστε να αλλάζουν το μέγεθος του χώρου, αλλά τι συμβαίνει όταν το περιεχόμενο των αντικειμένων είναι πολύ μεγάλο για να χωρέσει σε μια γραμμή;
Για να αποδείξω αυτό, θα αυξήσω το μέγεθος των δωματίων μου:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomΕδώ πώς φαίνεται τώρα.
Αν συρρικνωθεί το παράθυρο του προγράμματος περιήγησης, θα δείτε ότι το περιεχόμενο αποκόπτεται, καθώς δεν υπάρχει χώρος για αυτό. Ευτυχώς το flexbox ορίζει μια ιδιότητα flex-wrap για ακριβώς αυτό το eventuality, το οποίο έχει τρεις πιθανές τιμές: no-wrap (default), wrap και wrap-reverse.
wrap θα προκαλέσει οποιαδήποτε στοιχεία που θα εκτείνονταν πέρα από το κοντέινερ για να τυλιχτούν σε μια επόμενη γραμμή, ακριβώς όπως μια γραμμή κειμένων τυλίγει.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;flex-wrap:wrap;}Εάν σβήσετε το πρόγραμμα περιήγησης που βλέπετε, θα δείτε σε αυτό το demo τα αντικείμενα τώρα τυλίγονται σε νέες γραμμές. Παρατηρήστε πώς εξακολουθεί να εφαρμόζεται η ιδιότητα " ευθυγράμμιση-στοιχεία: βασική γραμμή" ; Η πραγματική ισχύς του Flexbox συνδυάζει τις ιδιότητές του.
Μια σημαντική ιδέα, την οποία θα καλύψω αργότερα, είναι ότι το flex-wrap: wrap-reverse δεν αντιστρέφει τη σειρά των αντικειμένων, προκαλεί οποιαδήποτε στοιχεία που θα εκτείνονταν πέρα από το δοχείο για να τυλίγονται σε μια προηγούμενη γραμμή, όπως φαίνεται σε αυτό το demo .
Όπως πολλές ιδιότητες CSS, κάποιες ιδιότητες του flexbox έχουν σύντομες εκδόσεις που εφαρμόζονται πιο σταθερά από τους κατασκευαστές του προγράμματος περιήγησης.
Η ιδιότητα flex-flow είναι στενογραφία για τις ιδιότητες flex-direction και flex-wrap . Έτσι αντί της γραφής:
flex-direction:row-reverse;flex-wrap:wrap;Μπορούμε να χρησιμοποιήσουμε τη στενογραφία:
flex-flow:row-reverse wrap;Πάνω, χρησιμοποιήσαμε την ιδιότητα ευθυγράμμισης-στοιχείων για να ευθυγραμμίσουμε αντικείμενα με τα στοιχεία γραμμής βάσης, θέσης και τεντώματος. Όπως μπορείτε να δείτε στο τελευταίο παράδειγμα, αυτό εξακολουθεί να συμβαίνει, αλλά συμβαίνει με βάση τη γραμμή.
Όταν τα στοιχεία μας έχουν τυλιχτεί, έχουμε την επιλογή να ορίσουμε τον τρόπο με τον οποίο θα τοποθετηθούν στον δευτερεύοντα άξονα αν ο περιέκτης είναι μεγαλύτερος από τον απαιτούμενο.
Αν θέσουμε το ελάχιστο ύψος του σπιτιού μας σε 1200px, τη διάταξη μας μοιάζει με αυτό .
.house {background:#FF5651;min-height:1200px;display:flex;justify-content:space-around;flex-wrap:wrap;}Μπορούμε τώρα να χρησιμοποιήσουμε την ιδιότητα ευθυγράμμισης-περιεχομένου για να σχεδιάσουμε τα στοιχεία σε ολόκληρο τον δευτερεύοντα άξονα.
Η ιδιότητα περιεχομένου ευθυγράμμισης έχει έξι ρυθμίσεις: κέντρο, flex-end, ευέλικτη εκκίνηση, χώρο γύρω, διάστημα μεταξύ και τέντωμα. Αυτές οι τιμές παρέχουν τα ίδια αποτελέσματα με αλλού: κεντράρισμα, ευθυγράμμιση στο ένα άκρο, ομοιόμορφη απόσταση ή τέντωμα.
Εδώ είναι ένα demo με την ιδιότητα που έχει οριστεί στο διάστημα-γύρω.
Μέχρι τώρα, όλες οι ιδιότητες που εξετάσαμε έχουν ρυθμιστεί στο στοιχείο του δοχείου. Για την τελειοποίηση των αντικειμένων, το flexbox μας παρέχει και μια σειρά ιδιοτήτων που μπορούν να οριστούν σε μεμονωμένα στοιχεία.
Για να διευκρινιστεί αυτό, ας αφαιρέσουμε κάποιο από τον κώδικα μας:
Flexbox Layout KitchenWashroomLoungeMaster BedroomBedroomΕδώ Πως μοιαζει.
Η πρώτη ιδιότητα του στοιχείου flexbox είναι η λανθασμένα ονομαστική ιδιότητα flex . Το flex είναι μια τιμή της ιδιότητας εμφάνισης στο δοχείο, αλλά είναι επίσης ιδιόκτητο.
Η ιδιότητα flex είναι στενογραφία για τις ιδιότητες flex-grow, flex-shrink και flex- base. Ο ρόλος αυτών των ιδιοτήτων είναι να τεντώσουν ή να σκιάσουν το μέγεθος του περιεχομένου, ώστε να γεμίσουν πλήρως το χώρο.
Η ευέλικτη ιδιότητα αναφέρει τα στοιχεία που μπορούν να διευρυνθούν, αν απαιτείται, έτσι ώστε τα αντικείμενα να γεμίζουν πλήρως το πλάτος (για κατεύθυνση ευκαμψίας: σειρά ) και το ύψος (για κατεύθυνση ευκαμψίας: στήλη ).
Η ιδιότητα flex-grow παίρνει μια αναλογία. Αν λοιπόν θέσουμε την ιδιότητα flex-grow σε 1, όλα τα στοιχεία μας θα έχουν το ίδιο μέγεθος με μπορείτε να δείτε εδώ .
.room {background:#00AAF2;height:90px;flex-grow:1;}Εκτός από τη λήψη ίσου μεγέθους, μπορούμε επίσης να ορίσουμε διαφορετικούς λόγους. Θέλω ακόμα η κουζίνα μου να είναι μεγαλύτερη από την τουαλέτα μου, οπότε ας το διορθώσουμε σε αυτό το demo .
.kitchen {height:300px;flex-grow:2;}το flex-shrink λειτουργεί ακριβώς το ίδιο με το flex-grow εκτός από το ότι συρρικνώνει το στοιχείο εάν απαιτείται, αντί να το επεκτείνει.
Εάν αλλάξετε το μέγεθος του προγράμματος περιήγησης, θα δείτε ότι σε διαφορετικά μεγέθη, η κουζίνα μου δεν είναι ακριβώς διπλάσια από το πλάτος των άλλων δωματίων . Αυτό οφείλεται στην ιδιοκτησία ευέλικτης βάσης .
flex βάση καθορίζει τον τρόπο με τον οποίο υπολογίζονται οι ιδιότητες flex-grow και flex-shrink . Έχει 2 τιμές: auto (η προεπιλογή) και 0.
Αν οριστεί σε 0, λαμβάνεται υπόψη ολόκληρο το στοιχείο. Εάν έχει οριστεί αυτόματα , το περιθώριο γύρω από το περιεχόμενο του στοιχείου έχει αλλάξει. Με άλλα λόγια, το 0 αγνοεί το μέγεθος του περιεχομένου του στοιχείου κατά τον υπολογισμό και το λαμβάνει αυτόματα υπόψη. Υπάρχει μια εύχρηστο διάγραμμα που παρέχεται από το W3C που εξηγεί αυτό.
Εδώ είναι ένα demo του τι συμβαίνει όταν θέτω flex-βάση: 0 στο παραπάνω παράδειγμα.
flex-base: 0 είναι ιδιαίτερα χρήσιμο αν θέλετε να τοποθετήσετε τα αντικείμενα διαστήματος ομοιόμορφα, ανεξάρτητα από το περιεχόμενό τους.
Όπως αναφέρθηκε παραπάνω, η ιδιότητα flex είναι μια συντομογραφία για αυτές τις ιδιότητες και θα βρείτε τον πιο αξιόπιστο τρόπο ρύθμισης αυτών των τιμών.
Η σειρά τιμών είναι ευέλικτη, ευέλικτη, ευέλικτη. Έτσι, για να ορίσετε μια τιμή ανάπτυξης 2, μια τιμή συρρίκνωσης 1 και μια βάση 0, θα χρησιμοποιούσατε:
.room {background:#00AAF2;height:90px;flex: 2 1 0;}Ένα από τα καλύτερα χαρακτηριστικά του flexbox είναι η ικανότητά του να αλλάζει τη σειρά των αντικειμένων, χωρίς να επηρεάζεται η σήμανση. αυτό είναι ιδιαίτερα χρήσιμο για την προσβασιμότητα, καθώς μας επιτρέπει να επισημάνουμε σωστά την σήμανση κώδικα και, στη συνέχεια, να την εμφανίζουμε με τον καλύτερο δυνατό τρόπο.
Για να γίνει αυτό, χρησιμοποιούμε την ιδιότητα παραγγελίας του στοιχείου.
Κοιτάζοντας το παράδειγμά μας, το μπάνιο είναι ακριβώς δίπλα στην κουζίνα. Θα προτιμούσα να βρισκόταν δίπλα στα υπνοδωμάτια, έτσι ώστε να μπορώ να πηγαίνω κατευθείαν στο ντους ενός πρωινού, οπότε ας το μετακινήσουμε. Είναι σήμερα το 2ο στοιχείο, θέλουμε να είναι το τρίτο. Έτσι, ορίσαμε την ιδιότητα της παραγγελίας αναλόγως σε αυτό το demo .
.washroom {height:60px;order:2;}Δείτε πώς πήδησε μέχρι το τέλος της σειράς; Είναι δίπλα στα υπνοδωμάτια, αλλά όχι με τον τρόπο με τον οποίο σκοπεύαμε. Αυτό είναι ένα μεγάλο gotcha στο flexbox, επειδή πολλοί προγραμματιστές (συμπεριλαμβανομένου και εγώ) αρχικά προσδοκώ ότι η σειρά να λειτουργήσει σαν ένας πίνακας.
η εντολή λειτουργεί πραγματικά όπως το z-index του CSS , πράγμα που σημαίνει ότι αν δεν ορίσετε ρητά μια παραγγελία για ένα στοιχείο, θεωρείται ότι είναι χαμηλότερη στη σειρά από ένα στοιχείο για το οποίο έχει οριστεί ρητά μια τιμή.
Θέλουμε την τουαλέτα να ανταλλάξει με το σαλόνι, έτσι σε αυτό το demo τα μόνα άλλα στοιχεία που χρειάζονται μια παραγγελία είναι τα υπνοδωμάτια s.
.washroom {height:60px;order:2;}.bedroom {order:3;}Παρατηρήστε πώς οι δύο κρεβατοκάμαρες μοιράζονται τον ίδιο αριθμό παραγγελίας; Σε περιπτώσεις όπως αυτές, το πρόγραμμα περιήγησης θα επιστρέψει στην εντολή DOM.
Η τελική ιδιότητα στοιχείο είναι ευθυγράμμιση-εαυτό. Χρησιμοποιείται για να αλλάξει η ευθυγράμμιση του στοιχείου στον δευτερεύοντα άξονα. τα στοιχεία ευθυγράμμισης χρησιμοποιούνται για την ευθυγράμμιση όλων των στοιχείων και αυτή η ιδιότητα σάς δίνει τη δυνατότητα να εξαιρεθείτε από αυτή τη ρύθμιση.
Παίρνουν τις ίδιες πέντε τιμές με την ισοδύναμη ιδιότητα στο δοχείο: γραμμή βάσης, κέντρο, ευέλικτο τέλος, ευέλικτη εκκίνηση και τέντωμα.
Εδώ είναι ένα demo του χώρου υγιεινής.
.washroom {height:60px;order:2;align-self:flex-end;}Το Flexbox είναι μια ισχυρή επιλογή για τη δημιουργία περιεχομένου. Παρόλο που δεν προορίζεται για την τοποθέτηση ολόκληρων σελίδων, η ανώτερη υποστήριξή του στη διάταξη πλέγματος το καθιστά μια εξαιρετική επιλογή, ειδικά για κινητούς πρώτους δικτυακούς τόπους.
Για να αποδείξουμε, πρόκειται να βάλουμε μαζί μια απλή σελίδα που χρησιμοποιεί μερικές από τις τεχνικές που περιγράφονται παραπάνω.
Πρώτα επάνω είναι το markup μας, και μερικά βασικά στυλ για τη σελίδα.
Flexbox Demo - A
- B
- C
- D
- E
- F
- G
Οπως και μπορείς να δεις , Έχω ένα div με την id σελίδα. Στην εσωτερική σελίδα έχω μια λίστα με ειδήσεις. Μετά τα νέα, έχω την κεφαλίδα, η οποία βρίσκεται κάτω από το περιεχόμενο ειδήσεων προς όφελος της προσβασιμότητας. Τέλος, έχω υποσέλιδο.
Το πρώτο πράγμα που θέλω να κάνω είναι να μετακινήσω την κεφαλίδα επάνω στην κορυφή της σελίδας. Για να το κάνουμε αυτό, θα ορίσουμε τη σελίδα να είναι ένα εμπορευματοκιβώτιο flexbox. Στη συνέχεια, θα ορίσουμε την κατεύθυνση στη στήλη. Στη συνέχεια, αντιστοιχίστε μια παραγγελία σε κάθε στοιχείο της σελίδας .
#page {display:flex;}#page {display:flex;flex-flow:column;}#header {order:1;}#news {order:2;}#footer {order:3;}Το επόμενο βήμα είναι να σχεδιάσετε την κεφαλίδα. Τα στοιχεία παιδιών μέσα σε κάδους flexbox μπορούν να είναι δοχεία flexbox από μόνες τους, έτσι μπορούμε να χρησιμοποιήσουμε flexbox για να διαχωρίσουμε ομοιόμορφα τα στοιχεία κεφαλίδας .
Ας ορίσουμε την κεφαλίδα να είναι ένα εμπορευματοκιβώτιο flexbox, στη συνέχεια, αφήστε το περιεχόμενο ομοιόμορφα, χωρίς επιπλέον παραπετάσματα στα πλάγια και, τέλος, βεβαιωθείτε ότι τα στοιχεία του μενού βρίσκονται στην ίδια γραμμή βάσης με το λογότυπο.
#header {order:1;display:flex;justify-content:space-between;align-items:baseline;}Τα ειδησεογραφικά μας στοιχεία θα είναι τοποθετημένα για χαρακτηριστικές ιστορίες, οπότε πρέπει να είναι ένα ουσιαστικό μέγεθος για να δημιουργηθεί χώρος για κείμενο, για μια εικόνα ή βίντεο. Γι 'αυτό χρειαζόμαστε να τυλίξουν.
Ας θέσουμε το news div να είναι ένα δοχείο flexbox. Στη συνέχεια, ας δώσουμε στο newsItem κάποιες ελάχιστες διαστάσεις και κάποιο χρώμα για να τις δούμε καθαρά.
#news {order:2;display:flex;}.newsItem {min-width:300px;min-height:250px;background:#79797B;border:1px solid #706667;}Τώρα πρέπει να ρυθμίσουμε το κοντέινερ ειδήσεων για να τυλίξουμε και το newsItem να επεκταθεί για να γεμίσει τον διαθέσιμο χώρο.
#news {order:2;display:flex;flex-flow:row wrap;}Η πρόκληση που έχουμε τώρα είναι ότι όταν τα newsItems δεν είναι ομοιόμορφα κατανεμημένα, το μεγαλύτερο στοιχείο (G) βρίσκεται στο κάτω μέρος. Στις περισσότερες περιοχές, θέλουμε να δώσουμε το μεγαλύτερο μέρος του χώρου στο ανώτατο περιεχόμενο. Μπορούμε να διορθώσουμε αυτό ρυθμίζοντας το περιτύλιγμα να περιστρέφεται.
#news {order:2;display:flex;flex-flow:row wrap-reverse;}Αυτό αναδιατάσσει τα στοιχεία, αλλά διαβάζοντας από την κορυφή αριστερά, είναι πλέον εκτός λειτουργίας. Επομένως, πρέπει να αντιστρέψουμε τη σειρά, ρυθμίζοντας την κατεύθυνση στην σειρά-αντίστροφη.
#news {order:2;display:flex;flex-flow:row-reverse wrap-reverse;}Αυτό τοποθετεί τα αντικείμενα σε διαδοχική σειρά, ανάγνωση από αριστερά προς τα δεξιά, από πάνω προς τα κάτω. με τα μεγαλύτερα αντικείμενα να βρίσκονται πάντα στην κορυφή. Αλλά δεν θέλω να αλλάξω τη σειρά των ιστοριών στο markup μου για να υποχρεώσω το στοιχείο Α να έρθει πριν από το στοιχείο Β. Έτσι το τελευταίο πράγμα που πρέπει να κάνω είναι να αλλάξω τη σειρά των αντικειμένων.
.newsItem:nth-of-type(7) {order:1;}.newsItem:nth-of-type(6) {order:2;}.newsItem:nth-of-type(5) {order:3;}.newsItem:nth-of-type(4) {order:4;}.newsItem:nth-of-type(3) {order:5;}.newsItem:nth-of-type(2) {order:6;}.newsItem:nth-of-type(1) {order:7;}Το τελευταίο στοιχείο που πρέπει να στυλισθεί είναι το υποσέλιδο. Θέλουμε να το ξεχωρίσουμε, σαν την κεφαλίδα, αλλά επειδή το υποσέλιδο έχει μόνο τρία παιδικά στοιχεία (σε σύγκριση με τα τέσσερα κεφαλίδες ), θα θέσουμε την παράγραφο να είναι διπλάσια από το λογότυπο και η λίστα .
#footer {order:3;display:flex;align-items:baseline;flex-direction:row;}#footer > * {flex:1;}#footer > p {flex:2;padding-right:2em;}Αυτό λειτουργεί εξαιρετικά σε μεγέθη επιφάνειας εργασίας, αλλά συρρικνώνει το πρόγραμμα περιήγησής σας κάτω και θα δείτε ότι είναι πολύ περιορισμένη σε μικρές συσκευές. Ας αλλάξουμε τον κώδικα έτσι ώστε να είναι διατεταγμένοι ως στήλες κάτω των 600px και να επανέρχονται σε μια σειρά πάνω από 600px.
#footer {order:3;display:flex;align-items:baseline;flex-direction:column;padding:2em 0;}#footer > * {flex:1;}#footer > p {flex:2;}@media only screen and (min-width:600px) {#footer {flex-direction:row;padding:0;}#footer > p {margin-right:2em;}}Και εκεί το έχετε. Μια σύγχρονη προσέγγιση για τον καθορισμό περιεχομένου σε μια ιστοσελίδα, που υποστηρίζεται ευρέως και είναι εύκολο να εφαρμοστεί.
Η δύναμη του flexbox είναι ότι οι ιδιότητές του μπορούν να συνδυαστούν για να μας δώσουν ακριβή έλεγχο των διατάξεων μας, με την απλούστερη δυνατή σύνταξη.