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 δύσκολο; Για μένα, ναι. Πολύ.

  • Η πρώτη μεγάλη δυσκολία είναι πώς να αφήσεις τις μεθόδους που ήδη λειτουργούν για κάτι νέο. Θέλει συνεχή προσήλωση, το χέρι πάει μόνο του στο float: left.
  • Η επόμενη δυσκολία ήταν το ίδιο το Flexbox. Νέοι κανόνες, νέες λογικές.
    Τι σημαίνει main axis, τι cross axis και πώς αυτά καθορίζουν όλη τη λογική του layout.
    Ενώ το Flexbox ξεκινάει πολύ απλά, μπορεί να γίνει ιδιαίτερα περίπλοκο. Υπάρχουν properties που χρησιμοποιούνται συνέχεια, άλλα που χρησιμοποιούνται σπάνια και το ποια είναι ποια θέλει μεγάλη εξοικείωση να το καταλάβεις.
  • Τέλος, υπάρχει κάτι πιο γενικό. Αν θες με το Flexbox να φτιάξεις ένα συνηθισμένο layout, τότε η μόνη αξία που έχει είναι εκπαιδευτική, να το μάθεις δηλαδή. Το Flexbox γίνεται αληθινά πολύτιμο όταν έχεις πιο δύσκολα προβλήματα να λύσεις. Άρα, πρέπει να μάθεις να βάζεις στον εαυτό σου τέτοια προβλήματα. Αυτό είναι το πιο δύσκολο απ’όλα.

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

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

  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    Από το CSS-Tricks βέβαια. Είναι το σημείο στο οποίο πηγαίνω πρώτα όταν κολλάω κάπου.
  • Flexbox Cheatsheet
    Αυτό το cheatsheet το έχω σε τόσες πολλές μεριές στον υπολογιστή μου που το συναντάω ακόμα κι όταν δε θέλω.
  • Flexbox Froggy
    Αυτό το παιχνιδάκι με μαθαίνει πώς δουλεύουν τα πράγματα. Όταν κάτι δε δουλεύει σωστά μέσα από αυτό βλέπω γιατί.

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

To Journal

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

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

Astrology App

Astrology App

Design για iOS & Android

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

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