Προσδιορίστε τον άξονα πριν επιλέξετε μια ιδιότητα CSS
Διαβάστε τα επιθέματα κρίνων-στόχων του επιπέδου και επιθεωρήστε την τρέχουσα διάταξη των βατράχων. Στην προεπιλεγμένη κατεύθυνση σειράς, το justify-content λειτουργεί κατά μήκος του οριζόντιου κύριου άξονα και το align-items κατά μήκος του κατακόρυφου εγκάρσιου άξονα. Πριν πληκτρολογήσετε μια τιμή, δηλώστε ποιον άξονα θέλετε να αλλάξετε. Αυτή η συνήθεια αποτρέπει ένα κοινό λάθος: την επιλογή της σωστής αξίας για ένα ακίνητο που ελέγχει μια διαφορετική κατεύθυνση.
Όταν το flex-direction αλλάζει σε στήλη, ο κύριος και ο εγκάρσιος άξονες αλλάζουν μαζί του. Επαναξιολογήστε την ιδιότητα αντί να υποθέσετε ότι το justify-content σημαίνει πάντα οριζόντια κίνηση. Εισαγάγετε μία αλλαγή CSS στο πρόγραμμα επεξεργασίας και συγκρίνετε τις θέσεις που προκύπτουν με τους στόχους. Οι βάτραχοι τοποθετούνται από το CSS σας, δεν σύρονται στη θέση τους. Χρησιμοποιήστε τις υποδείξεις του επιπέδου και τις επιτρεπόμενες ιδιότητες για να διατηρήσετε το πείραμα συνδεδεμένο με την εργασία που εμφανίζεται στην πραγματικότητα.
Εξηγήστε μια ανεπιτυχή αλλαγή πριν δοκιμάσετε μια άλλη
Αφού μια αλλαγή χάσει τον στόχο, ρωτήστε εάν η ιδιότητα επηρέασε λάθος άξονα, η επιλεγμένη τιμή τακτοποίησε τα στοιχεία διαφορετικά από την προσδοκία σας ή η τρέχουσα κατεύθυνση άλλαξε το νόημα της διάταξης. Κρατήστε το μέρος του κανόνα που καταλαβαίνετε και αναθεωρήστε ένα πράγμα. Η αντικατάσταση πολλών ιδιοκτησιών ταυτόχρονα μπορεί να φτάσει στον στόχο, αφήνοντάς σας αβέβαιο ποια αλλαγή έλυσε το πρόβλημα.
Για μια άσκηση ανασκόπησης, περιγράψτε τον επιτυχημένο κανόνα με λόγια πριν προχωρήσετε: ποιον άξονα χρησιμοποίησε και πώς τοποθέτησε τους βατράχους σε σχέση με τα μαξιλαράκια των κρίνου. Τα μεταγενέστερα επίπεδα μπορούν να συνδυάσουν ιδέες, επομένως αυτή η εξήγηση είναι πιο χρήσιμη από την απομνημόνευση μιας γραμμής χωρίς το περιεχόμενό της. Αυτός ο οδηγός δεν παρέχει μια εφευρεθείσα πλήρη λίστα απαντήσεων ούτε ισχυρίζεται ότι η επίλυση του παιχνιδιού πιστοποιεί την επαγγελματική ικανότητα CSS. Η συνδεδεμένη σελίδα αναπαραγωγής δίνει στον επεξεργαστή στοιχεία ελέγχου και ακριβές πλαίσιο εργασίας. το κέντρο υποστηρίζει την κατανόηση και την εξάσκηση σε όλα τα επίπεδα που πραγματικά συναντάτε.
Για παράδειγμα, εάν ένας κανόνας αλλάζει τους βατράχους κάθετα όταν σκοπεύατε να κινηθείτε οριζόντια, επιθεωρήστε το flex-direction και προσδιορίστε τον τρέχοντα κύριο άξονα πριν επιλέξετε άλλη τιμή. Πείτε τη σχέση δυνατά: αυτή η ιδιότητα αλλάζει την κατανομή κατά μήκος του κύριου άξονα και ο κύριος άξονας τρέχει αυτήν τη στιγμή προς αυτήν την κατεύθυνση. Στη συνέχεια, κάντε μια τροποποίηση και επιθεωρήστε το αποτέλεσμα. Μόλις λειτουργήσει, δοκιμάστε την εξήγησή σας σε σχέση με τα ορατά επιθέματα κρίνων. Αυτό μετατρέπει μια αποτυχημένη εικασία σε επαναχρησιμοποιήσιμη ιδέα διάταξης αντί για εντολή που θυμάστε μόνο για μία οθόνη.
Συμβουλές και στρατηγική για το Flexbox Froggy
Σημείωσε μια συμβουλή για τον επόμενο γύρο. Αυτή η λίστα δεν αλλάζει το παιχνίδι ούτε αποθηκεύει την πρόοδό σου.
Ερωτήσεις και απαντήσεις για το Flexbox Froggy
Χρειάζεται να εγκαταστήσω κάποιο εργαλείο κωδικοποίησης;
Όχι. Ο επεξεργαστής CSS βρίσκεται μέσα στο παιχνίδι του προγράμματος περιήγησης.
Είναι αυτό ένα ολοκληρωμένο μάθημα ανάπτυξης ιστοσελίδων;
Είναι ένα διαδραστικό παιχνίδι εξάσκησης για έννοιες διάταξης flexbox. Δεν αντικαθιστά ένα ευρύτερο μάθημα HTML και CSS.
Ποιος δημιούργησε το έργο;
Ο Thomas Park δημιούργησε το Flexbox Froggy. Η πηγή είναι με άδεια MIT και το ηχογραφημένο έργο τέχνης χρησιμοποιεί το CC BY 3.0. Οι σύνδεσμοι αναφοράς βρίσκονται παρακάτω.
Γιατί το flex-end αλλάζει πλευρά όταν αντιστρέφεται η κατεύθυνση;
Αρχή και τέλος ακολουθούν τον κύριο άξονα, όχι σταθερά αριστερά και δεξιά άκρα. Με row-reverse ο άξονας αρχίζει δεξιά, οπότε justify-content: flex-end τοποθετεί αριστερά. Ελέγξτε πρώτα το flex-direction. Το align-items αλλάζει τον εγκάρσιο άξονα και λύνει διαφορετικό πρόβλημα θέσης.