Το Πλήρες Εικονογραφημένο Εργαλείο Flexbox

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

Για να πάρετε μια καλή ιδέα για το πώς λειτουργεί flex προσπαθήστε flex editor editor σε αυτή τη σελίδα.

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

Καλώδιο

Το Flex είναι ένα σύνολο κανόνων για την αυτόματη τάνυση πολλαπλών στηλών και γραμμών
του περιεχομένου σε όλο το μητρικό του εμπορευματοκιβώτιο.

οθόνη: flex

Σε αντίθεση με πολλές άλλες ιδιότητες CSS, στο Flex έχετε ένα κύριο δοχείο και
αντικείμενα που είναι ενσωματωμένα μέσα σε αυτό. Ορισμένες ιδιότητες του CSS flex χρησιμοποιούνται μόνο στον γονέα. Άλλοι μόνο για τα αντικείμενα.

Μπορείτε να σκεφτείτε ένα στοιχείο flex ως γονικό δοχείο με οθόνη: flex. Τα στοιχεία που τοποθετούνται μέσα σε αυτό το δοχείο ονομάζονται στοιχεία. Κάθε δοχείο έχει σημείο εκκίνησης και σημείο καμπής, όπως φαίνεται στο παραπάνω διάγραμμα.

Κύριος άξονας και εγκάρσιος άξονας

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

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

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

Αν έχετε περισσότερα από 6 στοιχεία, θα δημιουργηθούν ακόμα περισσότερες σειρές.

Τα στοιχεία Flex διανέμονται εξίσου στον κύριο άξονα. Θα ρίξουμε μια ματιά στις ιδιότητες και τις αξίες για να το επιτύχουμε αυτό μέσα σε μια στιγμή.

Μπορείτε να καθορίσετε τον αριθμό των στηλών.

Ο τρόπος με τον οποίο οι σειρές και οι στήλες κατανέμονται στο γονικό στοιχείο καθορίζεται από την ευελιξία CSS Flex, την ευκαμψία και μερικές άλλες που θα αποδειχτεί σε όλο το υπόλοιπο αυτό το tutorial flex.

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

Κατεύθυνση

Είναι δυνατό να καθορίσετε την κατεύθυνση της ροής του στοιχείου αντιστρέφοντάς τον.

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

Κάλυμμα

flex-wrap: το περιτύλιγμα καθορίζει τον τρόπο περιτύλιξης των αντικειμένων όταν το γονικό κοντέινερ δεν έχει χώρο.

Ροή

η ευελιξία είναι ένα σύντομο χέρι για την κατεύθυνση ευκαμψίας και το flex-wrap, επιτρέποντάς σας να προσδιορίσετε και τα δύο χρησιμοποιώντας μόνο ένα όνομα ιδιοκτησίας.

Εύκαμπτη ροή: Η περιτύλιξη σειράς καθορίζει την κατεύθυνση ευκαμψίας για να είναι γραμμή και περιτύλιγμα για περιτύλιξη.ευέλικτη ροή: σειρά περιτύλιξης-αναστροφής.flex-flow: wrap line; justify-content: space-between;ευέλικτη ροή: περιτύλιξη σειράς-αναστροφήςευέλικτη ροή: σειρά-αντίστροφη περιτύλιξη-αντίστροφη?flex-flow: wrap line; justify-content: space-between;Η κατεύθυνση μπορεί να αλλάξει για να γίνει το πρωτεύον διατομής.

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

justify-content

ευέλικτη κατεύθυνση: σειρά? justify-content: flex-start | flex-end | κέντρο | διάστημα-μεταξύ | χώρος-γύρω | τέντωμα | χώρος-ομοιόμορφα

Έλαβα πολλά αιτήματα για να διευκρινίσω το παραπάνω παράδειγμα. Δημιούργησα λοιπόν αυτό το κινούμενο σχέδιο. Το αρχικό κομμάτι από το οποίο σχεδιάστηκε το διάγραμμα:

Κινούμενο δικαιολογεί-περιεχόμενο.

Η ελπίδα αυτή καθαρίζει λίγο την ομίχλη.

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

Η ίδια ιδιότητα justify-content χρησιμοποιείται για την ευθυγράμμιση των αντικειμένων όταν η κατεύθυνση ευελιξίας είναι στήλη. Εδώ είναι η κινούμενη έκδοση:

Συσκευασία Flex Lines (σύμφωνα με την προδιαγραφή Flex)

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

Συσκευασία Flex Lines (συνέχεια.) Αλλά τώρα με ευέλικτη κατεύθυνση που έχει οριστεί στη στήλη.

στοιχεία ευθυγράμμισης

τα στοιχεία ευθυγράμμισης ελέγχουν την ευθυγράμμιση των αντικειμένων οριζόντια, σε σχέση με το γονικό κοντέινερ.

flex-βάση

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

ευελιξία

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

flex-συρρικνωθεί

flex-συρρίκνωση είναι το αντίθετο του flex-grow. Σε αυτό το παράδειγμα, χρησιμοποιήθηκε μια τιμή 7 για να «συρρικνωθεί» το επιλεγμένο στοιχείο στο ποσό ίσο με το 1/7 του μεγέθους των περιβαλλόντων αντικειμένων - τα οποία επίσης θα προσαρμοστούν αυτόματα.

Όταν πρόκειται για μεμονωμένα αντικείμενα, μπορείτε να χρησιμοποιήσετε την ιδιότητα
flex ως συντόμευση για ευέλικτη ανάπτυξη, flex-συρρίκνωση και flex-βάση μόνο
ένα όνομα ιδιοκτησίας.

Σειρά

Χρησιμοποιώντας την ιδιότητα παραγγελίας, είναι δυνατό να αναδιοργανώσετε τη φυσική σειρά των αντικειμένων.

justify-items

Ένα τελευταίο πράγμα για εκείνους που θέλουν να χρησιμοποιήσουν το CSS Grid μαζί με το Flex Box: τα δικαιολογητικά-αντικείμενα του CSS του δικτύου είναι παρόμοια με το δικαιολογημένο περιεχόμενο του Flex. (Οι ιδιότητες που περιγράφονται στο παραπάνω διάγραμμα δεν θα λειτουργήσουν στο Flex, αλλά είναι σχεδόν ισοδύναμο με το πλέγμα για την ευθυγράμμιση του περιεχομένου των κυττάρων.)

Εάν θέλετε να υποστηρίξετε τη δουλειά μου, το CSS Visual Dictionary είναι το βιβλίο μου.

Ακολουθήστε με για εβδομαδιαίο Freemium στα κοινωνικά δίκτυα

Μπορείτε, στο Twitter, για δώρα για το Σαββατοκύριακο PDF.

Ακολουθήστε με στο Instagram για γρήγορο χτύπημα JavaScript.

Μπορείτε να με ακολουθήσετε στο Facebook για δωρεάν κωδικοποίηση.

Προσφορά περιορισμένου χρόνου

Τα διαγράμματα σε αυτό το σεμινάριο επηρεάστηκαν άμεσα από το χειρόγραφο!

CSS Visual Dictionary 28% OFF για Μεσαίους αναγνώστες.

28% OFF

Μεσαίες μόνο αναγνώστες:

CSS Visual Dictionary

== αρπάξτε ένα αντίγραφο ==

Περιέχει όλες τις ιδιότητες του CSS.