Οδηγός σχεδιαστή για το Flexbox και το πλέγμα

Τι σχεδιαστές πρέπει να γνωρίζουν σχετικά με αυτά τα μετασχηματιστικά εργαλεία διάταξης.

Το CSS έχει προχωρήσει πολύ από την εισαγωγή του το 1996, αλλά τα εργαλεία που διαθέτουμε για τη διάταξη δεν έχουν αλλάξει πολύ. Οι διατάξεις των πινάκων ήταν απίστευτα άκαμπτες, οι διατάξεις με βάση το πλωτήρα ήταν βασικά ένα hack, οι διατάξεις που βασίζονταν στην τοποθέτηση δεν ήταν προσαρμόσιμες και κανένας δεν μπορούσε να χειριστεί πολύπλοκα με αποτελεσματικό τρόπο. Μην με ενοχλείτε - αυτές οι μέθοδοι μας πήραν πολύ μακριά, αλλά δεν προορίζονται για σύνθετους σκοπούς.

Οι βραχυπρόθεσμες αυτές οι παλιές μέθοδοι διαμόρφωσης έγιναν ακόμα πιο εμφανείς με την ικανοποιητική διαδικτυακή σχεδίαση, στην οποία η απεριόριστη ρευστότητα του Ιστού είναι θεμελιώδης.

Με το flexbox και το πλέγμα, έχουμε τελικά εργαλεία που προορίζονται ειδικά για διάταξη, τα οποία είναι πιο αποτελεσματικά και άκυρα από hacks απαραίτητα με προηγούμενες μεθόδους διάταξης. Ξεκλειδώνουν νέες δυνατότητες στα παλιά προβλήματα, επιτρέπουν πράγματα που δεν ήταν δυνατά πριν και επιλύουν τα πραγματικά προβλήματα που αντιμετωπίζουμε με την ικανοποιητική σχεδίαση ιστοσελίδων.

Flexbox

Το Flexbox, γνωστό και ως CSS Flexible Boxes, είναι μια νέα μέθοδος διαμόρφωσης που μας δίνει τον έλεγχο ευθυγράμμισης που δεν μπορεί να παράγει άλλη μέθοδος CSS. Εξατομικεύει την 'μικροδιάταξη': τη δυνατότητα να ευθυγραμμίζει, να διατάζει και να διανέμει χώρο μεταξύ αντικειμένων σε ένα εμπορευματοκιβώτιο ή να μεταβάλλει το πλάτος ή το ύψος ενός στοιχείου για να καλύψει καλύτερα τον διαθέσιμο χώρο.

Βελτιωμένη περιτύλιξη

Στο Αισθητή Σχεδίαση Ιστού, το διαθέσιμο πλάτος ποικίλλει ανάλογα με το μέγεθος του πλάτους προβολής. Αυτό μπορεί να οδηγήσει σε ακούσια περιτύλιξη περιεχομένου, ειδικά όταν το περιεχόμενο είναι μεγαλύτερο από αυτό που έχει σχεδιαστεί για, ή το δοχείο του περιεχομένου είναι πολύ στενό. Πιθανότατα όλοι είδαμε πριν: ο σχεδιασμός υπολογίζει το μήκος του ιδανικού περιεχομένου, αλλά μόλις εφαρμοστεί και προστεθεί πραγματικό περιεχόμενο, το περιεχόμενο αναδιπλώνεται στην επόμενη γραμμή, επειδή δεν υπήρχε αρκετός χώρος ή διαλείμματα από το δοχείο. Και οι δύο δεν είναι ιδανικές και μπορεί να προκαλέσουν σκασίματα.

Το πρόβλημα δεν είναι βέβαιο ότι ο διαθέσιμος χώρος θα είναι πάντα αρκετά μεγάλος για να φιλοξενήσει περιεχόμενο που μπορεί να διαφέρει σε μήκος. Παραδοσιακά, έχουμε χρησιμοποιήσει τα CSS Media Queries για να προσαρμόσουμε τη διάταξη σε συγκεκριμένα σημεία διακοπής για να μετριάσουμε τα προβλήματα με το περιτύλιγμα περιεχομένου. Ωστόσο, τα ερωτήματα μέσων μαζικής ενημέρωσης δεν λαμβάνουν υπόψη τη διάρκεια του ίδιου του περιεχομένου - ανταποκρίνονται σε ένα ρητό πλάτος ή ύψος. Αυτό συχνά οδηγεί σε υπερβολικό αριθμό ερωτημάτων των μέσων ενημέρωσης για τον έλεγχο συγκεκριμένου περιεχομένου σε ρητά σημεία διακοπής.

Παράδειγμα βελτιωμένης περιτύλιξης με Flexbox

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

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

Βελτιωμένο διαχωρισμό και ευθυγράμμιση

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

Το Flexbox λύνει αυτό το γεγονός επιτρέποντας τη διανομή χώρου μεταξύ ενός άγνωστου αριθμού αντικειμένων μέσα σε μια περιοχή άγνωστου πλάτους ή ύψους και ευθυγραμμίζοντας αντικείμενα στον άξονα Χ ή Υ. Λειτουργεί με το πώς τα εργαλεία σχεδιασμού, όπως το Sketch ή το Illustrator, μπορούν να ελέγξουν την απόσταση και την ευθυγράμμιση, επιτρέποντας τον έλεγχο που θα περιμέναμε στον Ιστό.

Παράδειγμα βελτιωμένης διανομής χώρου με Flexbox

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

Παραγγελία πηγής

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

Η σειρά φυσικών πηγών του εγγράφου πρέπει να σας καθοδηγήσει όταν σκεφτόμαστε πώς θα προσαρμόζεται το σχέδιο σας σε διάφορα πλάτη προβολής, αλλά υπάρχουν φορές που είναι χρήσιμο να το τροποποιήσετε προκειμένου να αναδιατάξετε τα στοιχεία. Ο μόνος τρόπος για να το κάνετε αυτό πριν από το flexbox ήταν να αποκρύψετε το στοιχείο και να εμφανίσετε ένα άλλο, οδηγώντας σε διπλότυπο HTML ή να βασιστείτε στην απόλυτη τοποθέτηση, η οποία δεν λειτουργεί πάντα όταν το περιεχόμενο μπορεί να ποικίλει σε μέγεθος. Με το flexbox, μπορείτε απλώς να τροποποιήσετε τη σειρά των στοιχείων flex χωρίς να χρειάζεται να τροποποιήσετε την υποκείμενη δομή HTML.

Παράδειγμα παραγγελίας στοιχείων με το Flexbox

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

Διάταξη πλέγματος

Η διάταξη πλέγματος CSS είναι ένα δισδιάστατο σύστημα διάταξης που δημιουργήθηκε ειδικά για το Web. Μας δίνει τη δυνατότητα να διαιρέσουμε τη σελίδα σε περιοχές που μπορούν να οριστούν περαιτέρω από την άποψη του μεγέθους, της θέσης και της στρώσης, με αποτέλεσμα ένα απίστευτα ισχυρό εγγενές πλαίσιο.

Κατάλληλα για το σκοπό

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

Με το δίκτυο, δεν χρειαζόμαστε πλέον ένα πλαίσιο πλέγματος - είναι ένα εγγενές πλαίσιο ψημένο ακριβώς στο CSS. Μας επιτρέπει να καθορίσουμε τη διάταξη στο CSS με έναν διαισθητικό τρόπο, όλο το χρόνο υιοθετώντας την προεπιλεγμένη ρευστότητα του Ιστού. Οι δυνατότητες αυτού του νέου εργαλείου διάταξης είναι ατελείωτες και μας επιτρέπει να επιτύχουμε διατάξεις που ήταν δυνατές μόνο με Javascript πριν από την άφιξή του.

Παράδειγμα διάταξης πλέγματος

Διακομιστές Web της επόμενης γενιάς

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

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

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

Ένας Λόγος Προσοχής

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

Υπάρχουν περισσότερα. Πολύ περισσότερο.

Έχουμε μόνο γρατζουνίσει την επιφάνεια του τι flexbox και το δίκτυο μπορεί να κάνει. Ευτυχώς, υπάρχει μεγάλη διαθέσιμη τεκμηρίωση που αγγίζει τις δυνατότητες αυτών των νέων εργαλείων διαμόρφωσης. Εδώ είναι μερικά από τα αγαπημένα μου:

Flexbox

Πλέγμα

Όποιος έχει οικοδομήσει για το Διαδίκτυο είναι οδυνηρά επίγνωση των διαφόρων περιορισμών, όταν πρόκειται για τη διάταξη σε CSS. Συχνά, αυτό απαιτούσε να διακυβεύεται ο σχεδιασμός έτσι ώστε να λειτουργεί όπως αναμενόταν στην ανάπτυξη ή, χειρότερα, να βασίζεται στη Javascript για να εφαρμόσει τη συμπεριφορά που χρειαζόμασταν.

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