porcupine colors

porcupine colors

ΑρχικήJournal › Σχεδιάζοντας websites με Flexbox στο CSS

Σχεδιάζοντας websites με Flexbox στο CSS

Το Flexbox είναι μία μέθοδος δημιουργίας layouts για τα sites μας. Πρόκειται για μια προσέγγιση εντελώς διαφορετική από αυτά που γνωρίζαμε μέχρι σήμερα. Είναι λιτό και κομψό. Δίνει τη δυνατότητα να εφαρμοστούν νέες σχεδιαστικές ιδέες. Ή να εφαρμοστούν κάποιες παλιές πιο αποτελεσματικά. Είναι ιδανικό στο responsiveness, στο πώς αναδιατάσσονται δηλαδή τα πράγματα στις διάφορες οθόνες.

Το Flexbox όμως ζητάει πολλά: χρόνο να το μάθεις και κυρίως προσπάθεια να αλλάξεις τον τρόπο που σχεδιάζεις websites. Δεν είναι εύκολο πράγμα.

Αποφάσισα για τη νέα έκδοση αυτού του site να χρησιοποιήσω μόνο Flexbox. Αυτός ήταν ο καλύτερος τρόπος να το μάθω. Ήταν όμως και ανάγκη καθώς τα layouts σε κάθε σελίδα είναι αρκετά ιδιαίτερα.

Παραδείγματα Flexbox σε layouts

Ένα πολύ συνηθισμένο πρόβλημα στο web design είναι πώς δύο στήλες η μία δίπλα στην άλλη να έχουν κεντραρισμένο content κατακόρυφα. Ένα layout σαν αυτό.

Flexbox Vertical Alignment
Κατακόρυφη στοίχιση με Flexbox

Αυτό το layout προκύπτει πολύ εύκολα με Flexbox.

Για το div που περιλαμβάνει τα άλλα δύο, ας το πούμε .wrapper, αρκεί το:

.wrapper{
 display: flex;
 flex-direction: row;
}

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

.column{
 width: 50%;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

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

Με άλλα λόγια, ένα παλιό πρόβλημα λύνεται πιο εύκολα γιατί έχουμε νέα εργαλεία.

Μία εντελώς διαφορετική περίπτωση είναι το layout για το newsletter.

Flexbox Layout
Flexbox Layout

Αυτό το layout δεν ξέρω πώς βγαίνει χωρίς Flexbox. Μπορεί να γίνεται με πιο συμβατικούς τρόπους, μπορεί και όχι. Δεν το δοκίμασα. Αυτό το layout προέκυψε τελευταίο, όταν είχα σχεδιάσει το υπόλοιπο website και είχα ήδη μπει στα βαθιά του Flexbox.

Το σίγουρο είναι ότι το Flexbox αφήνει την ελευθερία στον designer να δοκιμάσει πράγματα που δε θα προέκυπταν ως πιθανότητα ποτέ διαφορετικά.

Πώς μπαίνει το Flexbox στο workflow του designer

Το πρώτο που πρέπει να ξέρει κάποιος που ξεκινάει με το Flexbox είναι ότι μπορεί να το χρησιμοποιήσει τώρα. Η υποστήριξη από τους browsers είναι πάρα πολύ καλή.

Είναι όμως το Flexbox δύσκολο; Για μένα, ναι. Πολύ.

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

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

Λίγο πιο πάνω έγραψα μια λίστα από πράγματα που με δυσκολεύουν με το Flexbox. Το τελευταίο από αυτά πιστεύω ότι είναι ο λόγος που χρειαζόμαστε το Flexbox: μας βάζει να σκεφτούμε διαφορετικά ως designers. Χάρη σε αυτό μπορούμε ν’ αλλάξουμε την οπτική μας και να σχεδιάσουμε πιο ενδιαφέροντα πράγματα για τους browsers. Μερικές φορές είναι σαν να ξεκινάει το web design από το μηδέν. Σαν να είναι η πρώτη φορά που σχεδιάζουμε sites.

To Journal

Επιστροφή στην κεντρική του Journal.

Ενα απο τα Projects μας

Οπτικά Λιόλιος

Οπτικά Λιόλιος

User Experience Design, User Interface Design & Front-End Development για το e-shop Οπτικά Λιόλιος

Σχεδιάζουμε κι αναπτύσσουμε καλύτερα websites & apps.

Το νέο MacBook Pro δεν είναι πρόβλημα. Το macOS όμως; Τα καλύτερα νέα apps του 2016: Spark & Bear