CSS-007 — CSS Flexbox: Δημιουργώντας ευέλικτες διατάξεις

Καλώς ήρθες σε ένα ακόμη μάθημα του Jerry's CodeLab!

Μέχρι τώρα μάθαμε να επιλέγουμε HTML στοιχεία με CSS Selectors, να κατανοούμε το Box Model, να διαχειριζόμαστε τις αποστάσεις, το Display και τη θέση των στοιχείων με το Position.

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

1. Τι είναι το Flexbox;

Το Flexbox (Flexible Box Layout) είναι ένα σύστημα διάταξης της CSS που μας επιτρέπει να οργανώνουμε εύκολα τα στοιχεία μέσα σε έναν γονικό περιέκτη.

Μπορούμε να το χρησιμοποιήσουμε για να:

Τοποθετούμε στοιχεία οριζόντια ή κάθετα.
Τα στοιχίζουμε στο κέντρο ή στις άκρες του περιέκτη.
Διαχειριζόμαστε τις αποστάσεις ανάμεσά τους.
Επιτρέπουμε στα στοιχεία να μετακινούνται σε επόμενη γραμμή.
Δημιουργούμε ευέλικτες διατάξεις που προσαρμόζονται στον διαθέσιμο χώρο.

Το πρώτο βήμα είναι να ορίσουμε έναν γονικό περιέκτη ως Flexbox container:

.container {
  display: flex;
}

Με αυτή τη δήλωση, τα άμεσα παιδιά του περιέκτη γίνονται flex items και τοποθετούνται αρχικά το ένα δίπλα στο άλλο.

2. Flex Container και Flex Items

Στο Flexbox υπάρχουν δύο βασικοί ρόλοι:

Flex Container: Το γονικό στοιχείο στο οποίο εφαρμόζουμε display: flex.
Flex Items: Τα άμεσα παιδιά του Flex Container.

Ας δούμε ένα απλό παράδειγμα:

<div class="container">
  <div>Ένα</div>
  <div>Δύο</div>
  <div>Τρία</div>
</div>

Αν εφαρμόσουμε display: flex στο .container, τα τρία εσωτερικά στοιχεία θα τοποθετηθούν σε σειρά.

3. Η ιδιότητα flex-direction

Η ιδιότητα flex-direction καθορίζει την κατεύθυνση με την οποία τοποθετούνται τα flex items.

Διαθέτει τέσσερις βασικές τιμές:

row: Τα στοιχεία τοποθετούνται σε οριζόντια σειρά. Είναι η προεπιλεγμένη τιμή.
row-reverse: Τα στοιχεία τοποθετούνται σε οριζόντια σειρά με αντίστροφη φορά.
column: Τα στοιχεία τοποθετούνται κάθετα, το ένα κάτω από το άλλο.
column-reverse: Τα στοιχεία τοποθετούνται κάθετα με αντίστροφη σειρά.

Παράδειγμα:

.container {
  display: flex;
  flex-direction: column;
}

Τώρα τα στοιχεία δεν εμφανίζονται οριζόντια, αλλά το ένα κάτω από το άλλο.

4. Η ιδιότητα justify-content

Η justify-content ελέγχει τον τρόπο με τον οποίο κατανέμονται τα flex items κατά μήκος του κύριου άξονα (main axis).

Οι πιο συνηθισμένες τιμές είναι:

flex-start: Τα στοιχεία ξεκινούν από την αρχή του κύριου άξονα.
flex-end: Τα στοιχεία τοποθετούνται στο τέλος του κύριου άξονα.
center: Τα στοιχεία συγκεντρώνονται στο κέντρο.
space-between: Το πρώτο στοιχείο τοποθετείται στην αρχή, το τελευταίο στο τέλος και ο διαθέσιμος χώρος μοιράζεται ανάμεσά τους.
space-around: Κάθε στοιχείο αποκτά χώρο γύρω του.
space-evenly: Ο διαθέσιμος χώρος κατανέμεται ισότιμα ανάμεσα στα στοιχεία και στα άκρα.

Παράδειγμα:

.container {
  display: flex;
  justify-content: center;
}

Με αυτή τη δήλωση, τα στοιχεία συγκεντρώνονται στο κέντρο του κύριου άξονα.

5. Η ιδιότητα align-items

Η align-items ελέγχει τη στοίχιση των flex items κατά μήκος του κάθετου προς τον κύριο άξονα άξονα (cross axis).

Οι βασικές τιμές της είναι:

stretch: Τα στοιχεία τεντώνονται ώστε να καλύψουν τον διαθέσιμο χώρο στον cross axis, εφόσον δεν περιορίζονται από άλλες διαστάσεις. Είναι η προεπιλεγμένη τιμή.
flex-start: Τα στοιχεία στοιχίζονται στην αρχή του cross axis.
flex-end: Τα στοιχεία στοιχίζονται στο τέλος του cross axis.
center: Τα στοιχεία στοιχίζονται στο κέντρο του cross axis.
baseline: Τα στοιχεία στοιχίζονται με βάση τη γραμμή βάσης του κειμένου τους.

Παράδειγμα:

.container {
  display: flex;
  align-items: center;
  min-height: 200px;
}

Τα στοιχεία στοιχίζονται στο κέντρο του cross axis. Επειδή η κατεύθυνση είναι από προεπιλογή row, ο cross axis είναι κατακόρυφος.

6. Η ιδιότητα flex-wrap

Τι συμβαίνει όταν ο διαθέσιμος χώρος δεν επαρκεί για να χωρέσουν όλα τα στοιχεία σε μία γραμμή;

Εδώ μας βοηθά η ιδιότητα flex-wrap.

nowrap: Όλα τα στοιχεία παραμένουν σε μία γραμμή. Είναι η προεπιλεγμένη τιμή.
wrap: Τα στοιχεία που δεν χωρούν μεταφέρονται σε επόμενη γραμμή.
wrap-reverse: Τα στοιχεία μεταφέρονται σε επόμενη γραμμή με αντίστροφη κατεύθυνση στον cross axis.

Παράδειγμα:

.container {
  display: flex;
  flex-wrap: wrap;
}

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

7. Η ιδιότητα gap

Η ιδιότητα gap καθορίζει την απόσταση ανάμεσα στα flex items.

.container {
  display: flex;
  gap: 20px;
}

Με αυτόν τον τρόπο δημιουργούμε απόσταση 20 pixels ανάμεσα στα στοιχεία, χωρίς να χρειάζεται να ορίσουμε ξεχωριστό margin σε καθένα.

Μπορούμε επίσης να χρησιμοποιήσουμε τις ιδιότητες:

row-gap: Καθορίζει την απόσταση ανάμεσα στις γραμμές.
column-gap: Καθορίζει την απόσταση ανάμεσα στις στήλες.

8. Η ιδιότητα align-content

Η align-content ελέγχει τον τρόπο κατανομής των γραμμών ενός Flexbox container κατά μήκος του cross axis, όταν υπάρχουν πολλές γραμμές και διαθέσιμος ελεύθερος χώρος.

Χρησιμοποιείται κυρίως όταν έχουμε ενεργοποιήσει το flex-wrap: wrap και τα στοιχεία έχουν δημιουργήσει περισσότερες από μία γραμμές.

Μερικές βασικές τιμές είναι:

flex-start: Οι γραμμές συγκεντρώνονται στην αρχή.
flex-end: Οι γραμμές συγκεντρώνονται στο τέλος.
center: Οι γραμμές συγκεντρώνονται στο κέντρο.
space-between: Ο διαθέσιμος χώρος μοιράζεται ανάμεσα στις γραμμές.
space-around: Υπάρχει χώρος γύρω από κάθε γραμμή.
stretch: Οι γραμμές τεντώνονται ώστε να καλύψουν τον διαθέσιμο χώρο.

Προσοχή: Η align-content δεν κάνει το ίδιο πράγμα με την align-items. Η πρώτη αφορά την κατανομή των γραμμών μεταξύ τους, ενώ η δεύτερη τη στοίχιση των στοιχείων μέσα στη γραμμή τους.

9. Πρακτική εξάσκηση στο Playground!

Ώρα να δοκιμάσεις όσα έμαθες! Άνοιξε το Playground του Jerry's CodeLab και πειραματίσου με τις ιδιότητες του Flexbox.

RUN ON PLAYGROUND

Μερικές ιδέες για πειραματισμό:

Άλλαξε το flex-direction: row σε column.
Δοκίμασε διαφορετικές τιμές στην justify-content.
Άλλαξε το align-items: center σε flex-start ή flex-end.
Μείωσε το πλάτος του περιέκτη και δοκίμασε το flex-wrap: wrap.
Άλλαξε την τιμή του gap και παρατήρησε τις αποστάσεις.
Δοκίμασε την align-content όταν τα στοιχεία δημιουργούν περισσότερες από μία γραμμές.

10. Τι πρέπει να θυμάσαι;

display: flex: Ενεργοποιεί το Flexbox στον γονικό περιέκτη.
flex-direction: Καθορίζει την κατεύθυνση των στοιχείων.
justify-content: Κατανέμει τα στοιχεία στον κύριο άξονα.
align-items: Στοιχίζει τα στοιχεία στον cross axis.
flex-wrap: Επιτρέπει τη δημιουργία πολλών γραμμών.
gap: Ορίζει τις αποστάσεις ανάμεσα στα στοιχεία.
align-content: Κατανέμει τις γραμμές στον cross axis.

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

Jerry's CodeLab
LEARN · EXPERIMENT · CREATE

Sharing practical coding lessons in HTML, CSS, JavaScript, and AngularJS 1.x. Learn by experimenting, building, and writing code.

Open Playground

CSS-007 — CSS Flexbox: Δημιουργώντας ευέλικτες διατάξεις