Τι είναι το Flexbox;

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

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

Flex-konteiner: Το στοιχείο με display: flex ή display: inline-flex. Σε αυτόν ορίζονται οι κανόνες διάταξης για τα άμεσα παιδιά του.
Flex-στοιχεία: Τα άμεσα παιδιά του flex-konteiner. Εφαρμόζονται σε αυτά ιδιότητες Flexbox που καθορίζουν τη συμπεριφορά τους μέσα στον κοντέινερ.
Κύριος άξονας (main axis): Ο άξονας κατά μήκος του οποίου τοποθετούνται τα flex-στοιχεία. Από προεπιλογή είναι οριζόντιος (από αριστερά προς τα δεξιά), αλλά μπορεί να αλλάξει με την ιδιότητα flex-direction.
Διασταυρούμενος άξονας (cross axis): Ο άξονας κάθετος στον κύριο άξονα.
Αρχή κύριου άξονα (main start) / Τέλος κύριου άξονα (main end): Η αρχή και το τέλος κατά μήκος του κύριου άξονα.
Αρχή διασταυρούμενου άξονα (cross start) / Τέλος διασταυρούμενου άξονα (cross end): Η αρχή και το τέλος κατά μήκος του διασταυρούμενου άξονα.

Βασικές ιδιότητες του Flexbox για το flex-konteiner:

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

Βασικές ιδιότητες των flex-στοιχείων:

order: Ορίζει τη σειρά εμφάνισης του flex-στοιχείου (προεπιλογή 0).
flex-grow: Συντελεστής ανάπτυξης του flex-στοιχείου, που καθορίζει πόσο μπορεί να μεγαλώσει για να γεμίσει τον διαθέσιμο χώρο.
flex-shrink: Συντελεστής συρρίκνωσης του flex-στοιχείου, που καθορίζει πόσο μπορεί να μικρύνει για να αποφευχθεί η υπερχείλιση.
flex-basis: Αρχικό μέγεθος του flex-στοιχείου πριν από την κατανομή του ελεύθερου χώρου.
flex: Συντομεύει τις flex-grow, flex-shrink και flex-basis.
align-self: Υπερισχύει το align-items για συγκεκριμένο flex-στοιχείο.

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

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Κάνει τον κοντέινερ flex-konteiner */
  justify-content: center; /* Ευθυγραμμίζει τα στοιχεία στο κέντρο του κύριου άξονα */
  align-items: center; /* Ευθυγραμμίζει τα στοιχεία στο κέντρο του διασταυρούμενου άξονα */
  height: 200px; /* Για επίδειξη ευθυγράμμισης */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Πλεονεκτήματα του Flexbox:

Εύκολη ευθυγράμμιση στοιχείων οριζόντια και κάθετα.
Ευέλικτη κατανομή χώρου μεταξύ των στοιχείων.
Εύκολη αλλαγή σειράς στοιχείων.
Ανταποκρινόμενος σχεδιασμός χωρίς χρήση float και position.
Καλή υποστήριξη σε σύγχρονους browsers.