Η διαφορά μεταξύ πλάτους και ευέλικτης βάσης στο Flexbox

Κατανοώντας τα περίεργα μέρη

Όταν άρχισα να μαθαίνω το Flexbox, το πράγμα που με εντυπωσίασε περισσότερο ήταν "Γιατί πρόσθεσαν αυτήν την ευέλικτη βάση;" Εννοώ, έχω πλάτος… Γιατί υπάρχει επίσης μια ευέλικτη βάση;

"Δυναμικός περιορισμός"

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

Μετά από πολλούς πειραματισμούς και κάποια καλή μόδα, κατέληξα στο συμπέρασμα ότι ο πρωταρχικός σκοπός του flex-base ήταν να παράσχει έναν «δυναμικό» περιορισμό. Τι ακριβώς εννοώ με αυτό; Ένας «δυναμικός» περιορισμός.

Υποθέτω ότι είστε ήδη εξοικειωμένοι ή τουλάχιστον γενικά εξοικειωμένοι με το CSS και το Flexbox.

Δεν θα αναφερθώ σε λεπτομέρειες σχετικά με το CSS ή το Flexbox που θα σας διδάξουν τις βασικές έννοιες οποιουδήποτε από αυτά.

Πρέπει να ξέρετε

Θα χρησιμοποιήσω επίσης το SCSS, όχι το εγγενές CSS, και τη μέθοδο "Block-Element-Modifier (BEM)". Ο λόγος για αυτό είναι ότι πιστεύω ότι είναι ευκολότερο να είμαστε συνοπτικοί με αυτόν τον τρόπο. Επομένως, θα πρέπει να κατανοήσετε τα βασικά του SCSS και της ένθεσης, το BEM πρέπει να είναι αυτονόητο στα παραδείγματα.

Ο στόχος αυτού του άρθρου είναι να απλοποιήσει το αίνιγμα που φαίνεται να υπάρχει στο Διαδίκτυο σχετικά με την ευέλικτη βάση. Έχω δει συχνά την απάντηση «χρησιμοποιείτε ευέλικτη βάση αντί πλάτους» ως απάντηση στο σκοπό της. Φυσικά, αυτό είναι απολύτως αποδεκτό για τις περισσότερες περιπτώσεις, αν και είναι δυνατό να το χρησιμοποιήσετε με πιο προηγμένους τρόπους. Φαίνεται ότι το δυναμικό της ευέλικτης βάσης έχει αποφύγει πολλούς εδώ και αρκετό καιρό (φυσικά όχι όλα), αλλά τολμώ να πω πολλά .

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

Το κρέας και οι πατάτες

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

Οπτικά παραδείγματα

Στο παραπάνω παράδειγμα, έχουμε ένα «εσωτερικό» στοιχείο που θα ζει μέσα στο εξωτερικό «στοιχείο». Το εξωτερικό στοιχείο είναι το Flexbox μας και το εσωτερικό έχει μια ευέλικτη βάση 400px.

Το HTML για τα παραπάνω μπορεί να μοιάζει με αυτό:

Αποτέλεσμα σε ένα γκρι κουτί που έχει πλάτος ακριβώς 400px έως 250px στο κέντρο της οθόνης μας όπως:

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

Ας πάρουμε «δυναμική»

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

Η αλλαγή της κατεύθυνσης κάμψης αλλάζει την κατεύθυνση που θα επηρεάσει η ευέλικτη βάση. Τόσο αποτελεσματικά το flex-base είναι τόσο πλάτος όσο και ύψος. Στο παραπάνω παράδειγμα, η ευέλικτη βάση θα έχει ως αποτέλεσμα το μπλοκ να έχει ύψος 400px έναντι του ορθογωνίου 400px που είδαμε πριν.

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

Παρατήρηση

Παρατηρήστε πώς στο πρώτο παράδειγμα, η ευέλικτη βάση αναλαμβάνει τον ρόλο του πλάτους και στο δεύτερο παράδειγμα ο ρόλος του ύψους. Η βάση Flex είναι τόσο πλάτος όσο και ύψος σε ένα Flexbox, ανάλογα με την κατεύθυνση της κάμψης. Πολύ ωραίο!

Βαθύτερη κατανόηση / Βέλτιστες πρακτικές

Εδώ είναι μερικά από τα πιο σημαντικά πράγματα που έχω μάθει σχετικά με το flex-basis κατά τη χρήση του Flexbox.

  • Το Flex-base ελέγχει είτε «πλάτος» είτε «ύψος» με βάση την κατεύθυνση κάμψης
  • Το Flex-basis θα παρακάμψει οποιοδήποτε άλλο πλάτος: ή ύψος: ιδιότητες εάν δηλώνεται συγκεκριμένα οτιδήποτε άλλο εκτός από το flex-base: auto (αυτόματα από προεπιλογή)
  • Η συντομογραφία για ευέλικτη βάση είναι (flex: $ grow, $ shrink, $ size) και έχει οριστεί σε (flex: 0 1 auto ) από προεπιλογή.
  • Όταν η ευέλικτη βάση έχει ρυθμιστεί σε αυτόματη , ελέγχει πρώτα για μια ιδιότητα πλάτους ή ύψους (με βάση την κατεύθυνση) εάν δεν υπάρχει , χρησιμοποιεί τα στοιχεία περιεχομένου
  • Το Flex-basis θα εξακολουθεί να υπακούει σε ρυθμίσεις ελάχιστου / μέγιστου πλάτους: ή ύψους. Και πάλι, βασίζεται στην ευέλικτη κατεύθυνση:
  • Η βάση Flex σε μια στήλη παρακάμπτει το ύψος :, αυτό είναι σημαντικό επειδή αν και το πλάτος: θα υπακούει στην ευελιξία, το ύψος: δεν θα. (Αυτό μπορεί να προκαλέσει σύγχυση και απροσδόκητα αποτελέσματα στο σχέδιό σας.)

Είναι σημαντικό να σημειωθεί

Παρατηρήστε πόσο έντονη είναι η αυτόματη . Από προεπιλογή, εάν έχετε ορίσει ένα πλάτος και δεν έχετε δηλώσει μια τιμή βάσης flex, το πλάτος θα λειτουργεί κανονικά σε αυτό το στοιχείο. Δεν υπάρχει διαφορά μεταξύ του τρόπου λειτουργίας του flex-base: στο στοιχείο σας και του τρόπου λειτουργίας : πλάτος: στο στοιχείο σας. Το πλάτος θα ακολουθεί ακόμη και την ευελιξία κατά τη χρήση του Flexbox.

Ο αποκλίνων συντελεστής μεταξύ πλάτους και εύκαμπτης βάσης είναι η δυναμική ικανότητα της ευέλικτης βάσης να αλλάζει την αποτελεσματική της κατεύθυνση με βάση την ευέλικτη κατεύθυνση.

Η προειδοποίηση

ύψος: από την άλλη πλευρά ενεργεί λίγο διαφορετικά. Η ιδιότητα ύψους δεν υπακούει στην ευέλικτη συρρίκνωση με τον ίδιο τρόπο όπως και το πλάτος. Όταν χρησιμοποιείτε τη στήλη flex-direction θα πρέπει πάντα να χρησιμοποιείτε τη βάση flex για να ελέγχετε δυναμικά το μέγεθος του Flexbox έτσι ώστε να έχετε συνεπή και αναμενόμενα αποτελέσματα.

Σημειώστε επίσης το σημείο 4 κουκκίδων :

  • Όταν η ευέλικτη βάση έχει ρυθμιστεί σε αυτόματη , ελέγχει πρώτα για μια ιδιότητα πλάτους ή ύψους (με βάση την κατεύθυνση) εάν δεν υπάρχει , χρησιμοποιεί τα στοιχεία περιεχομένου

Αυτό σημαίνει ότι η ευέλικτη βάση θα προσαρμόσει αυτόματα το στοιχείο βάσει του μεγέθους του περιεχομένου (το μέγεθος του εσωτερικού στοιχείου) όταν έχει ρυθμιστεί σε βάση βάσης: αυτόματη. Μόνο εάν δεν υπάρχει πλάτος: ή ύψος: ρυθμίστε το στοιχείο.

Βέλτιστες πρακτικές

Προτείνω ότι όταν μπορείτε, ως βέλτιστη πρακτική, να χρησιμοποιείτε ευέλικτη βάση σε πλάτος ή ύψος, με αυτόν τον τρόπο τα αποτελέσματά σας είναι πάντα συνεπή. Λαμβάνοντας υπόψη αυτό το πλάτος: θα υπακούει σε ευέλικτη συρρίκνωση και σε αυτό το ύψος: δεν θα καταλάβει ότι μπορεί να υπάρχουν δραματικές διαφορές μεταξύ του τρόπου λειτουργίας του πλάτους και του ύψους σε ένα Flexbox όταν χρησιμοποιείτε άλλες ιδιότητες Flexbox σε συνδυασμό, όπως το flex-wrap για παράδειγμα. Χρησιμοποιήστε επίσης τη συντομογραφία του flex για λόγους ευκολίας, συνέπειας και αναγνωσιμότητας

Η συντομογραφία για flex-basis είναι (flex: $ grow, $ shrink, $ size) και έχει οριστεί σε (flex: 0 1 auto ) από προεπιλογή.

flex: 0 1 200px;

Υπάρχουν ορισμένες περιπτώσεις στις οποίες μπορεί να χρειαστεί να χρησιμοποιήσετε πλάτος ή ύψος πάνω από το flex-basis. Ορισμένες περιπτώσεις ενδέχεται να περιλαμβάνουν λύσεις σφαλμάτων Flexbox. Ένας καλός πόρος σε αυτό το θέμα είναι το Flexbugs. Το Flexbugs είναι επίσης ένα καλό μέρος για τον προσδιορισμό άλλων βέλτιστων πρακτικών με βάση τα προγράμματα περιήγησης που σκοπεύετε να υποστηρίξετε.

Επιπρόσθετοι πόροι

Στο ακόλουθο παράδειγμα codepen , δείχνω flex-wrap για να δείξω ένα οπτικό παράδειγμα των παραπάνω πληροφοριών από αυτό το άρθρο.

Χρησιμοποιήστε αυτό το codepen και ελέγξτε διεξοδικά τον κώδικα. Θα δείτε πώς χρησιμοποιώ μόνο το flex-basis μία φορά σε ολόκληρη τη βάση κώδικα για τον έλεγχο πολλαπλών σεναρίων. Αυτό είναι μόνο ένα μικρό παράδειγμα πιθανών περιπτώσεων χρήσης.

συμπέρασμα

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

Εάν νομίζετε ότι υπάρχει κάτι που μου έλειπε, βρήκα ένα τυπογραφικό λάθος, κλπ… παρακαλώ ενημερώστε με!

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

Ερχομαι σε επαφή ?

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

Θα προσπαθήσω το καλύτερό μου για να απαντήσω σε σχόλια ή ερωτήσεις εδώ στο Medium.

Εάν κάνετε το κοινωνικό πράγμα: Instagram ή Facebook.

Φωτογραφικές μονάδες: (Καταρράκτης | Jared Erondu) (Chatter | Dan Wayman) (Αποποίηση | Pop & Zebra) (Στόχος | Olav Ahrens Røtne) και (Πάμε | Goh Rhy Yan). Όλες οι φωτογραφίες από το Unsplash.com