Τι είναι το Flexbox;

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

Βασικές έννοιες του Flexbox:

• Άξονας κύριος (main axis): Ο άξονας κατά μήκος του οποίου τοποθετούνται τα στοιχεία. Προεπιλεγμένα, οριζόντια (από αριστερά προς τα δεξιά).
• Άξονας διασταύρωσης (cross axis): Ο άξονας κάθετος στον άξονα κύριο. Προεπιλεγμένα, κάθετος (από πάνω προς τα κάτω).
• Κοντέινερ (flex container): Το στοιχείο στο οποίο εφαρμόζονται οι ιδιότητες Flexbox (display: flex ή display: inline-flex).
• Στοιχεία (flex items): Τα παιδιά στοιχεία του κοντέινερ.

Ιδιότητες για το κοντέινερ Flex:

• display: flex ή inline-flex
• flex-direction: Καθορίζει την κατεύθυνση του άξονα κύριου (row, row-reverse, column, column-reverse)
• flex-wrap: Καθορίζει αν τα στοιχεία θα τυλίγονται σε νέα γραμμή (nowrap, wrap, wrap-reverse)
• justify-content: Ευθυγράμμιση των στοιχείων κατά μήκος του άξονα κύριου (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: Ευθυγράμμιση των στοιχείων κατά μήκος του άξονα διασταύρωσης (flex-start, flex-end, center, baseline, stretch)
• align-content: Ευθυγράμμιση των γραμμών ή στηλών κατά μήκος του άξονα διασταύρωσης σε ένα πολύγραμμο κοντέινερ (flex-start, flex-end, center, space-between, space-around, stretch)

Ιδιότητες για τα flex στοιχεία:

• order: Καθορίζει τη σειρά του στοιχείου στο κοντέινερ
• flex-grow: Καθορίζει πόσο πρέπει να μεγαλώσει το στοιχείο για να καταλάβει τον διαθέσιμο χώρο
• flex-shrink: Καθορίζει πόσο πρέπει να μικρύνει το στοιχείο αν ο χώρος είναι ανεπαρκής
• flex-basis: Καθορίζει το αρχικό μέγεθος του στοιχείου πριν από την κατανομή του χώρου
• flex: Συντομευμένη ιδιότητα για flex-grow, flex-shrink και flex-basis
• align-self: Υπερκαθορίζει την ευθυγράμμιση του στοιχείου κατά μήκος του άξονα διασταύρωσης (flex-start, flex-end, center, baseline, stretch, auto)

Παράδειγμα χρήσης:

/* Κοντέινερ */
.container {
  display: flex; /* Ενεργοποιεί το Flexbox */
  flex-direction: row; /* Διάταξη σε γραμμή */
  justify-content: center; /* Κεντράρισμα οριζόντια */
  align-items: center; /* Κεντράρισμα κάθετα */
  height: 200px; /* Ύψος κοντέινερ */
  border: 1px solid black;
}

/* Στοιχεία */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Το Flexbox απλοποιεί σημαντικά τη δημιουργία ευέλικτων διατάξεων σε σύγκριση με τις παραδοσιακές μεθόδους (float, inline-block, table).