Πώς να χρησιμοποιήσετε το flexbox για την τοποθέτηση…

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

Η βασική ιδέα του Flexbox είναι το flex-container και τα flex στοιχεία.

Ιδιότητες για το flex-container (display: flex;):

flex-direction: καθορίζει την κατεύθυνση τοποθέτησης των flex στοιχείων (άξονας κύριος).
- 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 στοιχεία κατά μήκος του διασταυρούμενου άξονα.
- stretch (προεπιλογή, αν τα στοιχεία δεν έχουν ορισμένο ύψος/πλάτος): τεντώνει τα στοιχεία κατά μήκος του διασταυρούμενου άξονα.
- flex-start: στην αρχή.
- flex-end: στο τέλος.
- center: στο κέντρο.
- baseline: στη γραμμή βάσης του κειμένου.
align-content: ευθυγραμμίζει τις γραμμές των flex στοιχείων κατά μήκος του διασταυρούμενου άξονα, όταν υπάρχουν πολλαπλές γραμμές (flex-wrap: wrap). Λειτουργεί παρόμοια με το justify-content, αλλά για γραμμές.
- stretch (προεπιλογή): τεντώνει τις γραμμές.
- flex-start: στην αρχή.
- flex-end: στο τέλος.
- center: στο κέντρο.
- space-between: ίση κατανομή με κενό ανάμεσα στις γραμμές.
- space-around: ίση κατανομή με κενό γύρω από τις γραμμές.
gap, row-gap, column-gap: καθορίζει τα κενά μεταξύ των flex στοιχείων.

.flex-container {
  display: flex; /* Δημιουργεί flex κοντέινερ */
  flex-direction: row; /* Οριζόντια διάταξη */
  flex-wrap: wrap; /* Μεταφορά σε νέα γραμμή */
  justify-content: center; /* Ευθυγράμμιση στο κέντρο */
  align-items: center; /* Κάθετη ευθυγράμμιση */
  gap: 10px; /* 10px κενό μεταξύ στοιχείων */
}

Ιδιότητες για τα flex στοιχεία (άμεσοι απόγονοι του flex-container):

order: καθορίζει τη σειρά εμφάνισης του στοιχείου μέσα στο κοντέινερ (προεπιλογή 0). Τα μικρότερα τιμές εμφανίζονται πρώτα.
flex-grow: καθορίζει πόσο μπορεί να μεγαλώσει το στοιχείο σε σχέση με άλλα, καταλαμβάνοντας διαθέσιμο χώρο. Προεπιλογή 0.
flex-shrink: καθορίζει πόσο μπορεί να συρρικνωθεί το στοιχείο αν ο χώρος είναι περιορισμένος. Προεπιλογή 1.
flex-basis: ορίζει το βασικό μέγεθος του στοιχείου πριν την κατανομή του ελεύθερου χώρου. Μπορεί να είναι σε px, %, rem, auto κ.λπ. (προεπιλογή auto).
flex: σύντομη ιδιότητα για flex-grow, flex-shrink, flex-basis.
align-self: υπερισχύει της ευθυγράμμισης align-items για αυτό το συγκεκριμένο στοιχείο. Μπορεί να πάρει τις ίδιες τιμές.

.flex-item {
  order: 2; /* Αυτό το στοιχείο θα εμφανιστεί δεύτερο */
  flex-grow: 1; /* Θα καταλάβει το υπόλοιπο χώρο */
  flex-shrink: 0; /* Δεν θα συρρικνωθεί */
  flex-basis: 100px; /* Βασικό μέγεθος 100px */
  align-self: flex-start; /* Ευθυγράμμιση στην αρχή */
}

.another-item {
  flex: 1 1 auto; /* grow: 1, shrink: 1, basis: auto */
}

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

Πώς να χρησιμοποιήσετε το flexbox για την τοποθέτηση στοιχείων στη σελίδα;