Μοντέλα Flexbox Η Ultimate CSS Flexbox Code Library

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

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

Αυτή η βιβλιοθήκη είναι εντελώς δωρεάν και είναι ανοιχτή από το GitHub. Όλα τα παραδείγματα μπορούν να είναι κατεβάστηκε τοπικά μέσω του NPM ή μέσω του GitHub. Αλλά μπορείτε επίσης να περιηγηθείτε στα παραδείγματα μέσω του ιστοτόπου για να αντιγράψετε και να επικολλήσετε τους κωδικούς ανάλογα με τις ανάγκες σας.

Κάθε μοτίβο έχει τη δική του σελίδα με μια σύντομη περιγραφή και δείγματα κώδικα. Μπορείτε να κυριολεκτικά αντιγράψτε και επικολλήστε τους κώδικες στο υπάρχον έργο σας στο διαδίκτυο, αν και συνιστάται πρώτα να μάθετε λίγο για το τι κάνει ο κώδικας και γιατί το χρησιμοποιείτε.

Πάρτε για παράδειγμα την επίδειξη γραμμών κεφαλίδας τοποθεσίας χρησιμοποιώντας το flexbox για να ευθυγραμμίσετε όλα τα στοιχεία σε μια κορυφαία επίσκεψη navbar δίπλα-δίπλα.

Συνήθως αυτό απαιτεί πλωτήρες και μια κλάση clearfix για να πάρει τα πάντα ευθυγραμμισμένα σωστά.

Με το flexbox μπορείτε να κρατάτε τα πάντα σε ένα δοχείο χρησιμοποιώντας το οθόνη: flex ιδιοκτησία. Με αυτόν τον τρόπο μπορείτε καθορίστε τον τρόπο αλληλεπίδρασης των στοιχείων μεταξύ τους και πώς το flexbox πρέπει να λειτουργούν σε μικρότερες οθόνες.

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

Εάν είστε ολοκαίνουργιο στο flexbox, τότε σίγουρα ελέγξτε τα Flexbox Patterns. Ο ιστότοπος δεν θα σας διδάξει όλα τα βασικά του flexbox, αλλά θα προσφέρει παραδείγματα πραγματικού κόσμου τα οποία μπορείτε να χρησιμοποιήσετε για τα δικά σας projects web.