Για ποιο λόγο χρησιμοποιείται το Flexbox;

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

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

• Flex κοντέινερ: Το στοιχείο στο οποίο εφαρμόζεται display: flex; ή display: inline-flex;. Περιέχει τα flex στοιχεία.
• Flex στοιχεία: Άμεσα παιδιά του flex κοντέινερ.

Το Flexbox επιτρέπει τον έλεγχο:

• Της κατεύθυνσης διάταξης των στοιχείων (flex-direction).
• Της περικοπής των στοιχείων στη επόμενη γραμμή/στήλη (flex-wrap).
• Της ευθυγράμμισης των στοιχείων κατά μήκος του κύριου άξονα (justify-content).
• Της ευθυγράμμισης των στοιχείων κατά μήκος του διασταυρούμενου άξονα (align-items για μεμονωμένα στοιχεία και align-content για πολλαπλές γραμμές/στήλες).
• Της σειράς εμφάνισης των στοιχείων (order).
• Της κατανομής του ελεύθερου χώρου μεταξύ των στοιχείων (flex-grow, flex-shrink, flex-basis).

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

.δοχείο {
  display: flex;
  justify-content: center; /* Κεντράρισμα οριζόντια */
  align-items: center; /* Κεντράρισμα κάθετα */
}

.στοιχείο {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="δοχείο">
  <div class="στοιχείο"></div>
  <div class="στοιχείο"></div>
  <div class="στοιχείο"></div>
</div>