Το μοντέλο διάταξης Flexbox (Flexible Box) παρέχει έναν πιο αποτελεσματικό τρόπο στοίχισης και κατανομής στοιχείων μέσα σε έναν περιέκτη, ακόμη και όταν το μέγεθός τους είναι άγνωστο ή δυναμικό.
Περιέκτης Flex
Set on parent: display: flex; or display: inline-flex;
| Ιδιότητα | Περιγραφή | Κοινές Τιμές |
|---|---|---|
flex-direction |
Κατεύθυνση κύριου άξονα | row, row-reverse, column, column-reverse |
flex-wrap |
Αναδίπλωση ή όχι | nowrap, wrap, wrap-reverse |
flex-flow |
Συντομογραφία για κατεύθυνση και αναδίπλωση | row wrap |
justify-content |
Στοίχιση στον κύριο άξονα | flex-start, flex-end, center, space-between, space-around |
align-items |
Στοίχιση στον δευτερεύοντα άξονα | flex-start, flex-end, center, baseline, stretch |
align-content |
Στοίχιση πολλαπλών γραμμών στον δευτερεύοντα άξονα | flex-start, flex-end, center, space-between, stretch |
Στοιχεία Flex
Set on children:
| Ιδιότητα | Περιγραφή | Προεπιλογή |
|---|---|---|
order |
Σειρά κατάταξης (μικρότερες τιμές έρχονται πρώτες) | 0 |
flex-grow |
Συντελεστής μεγέθυνσης (όταν υπάρχει χώρος) | 0 |
flex-shrink |
Συντελεστής συρρίκνωσης (όταν ο χώρος είναι περιορισμένος) | 1 |
flex-basis |
Βασικό μέγεθος πριν την κατανομή χώρου | auto |
flex |
Συντομογραφία για grow, shrink και basis | 0 1 auto |
align-self |
Επιτρέπει σε μεμονωμένο στοιχείο να έχει διαφορετική στοίχιση | auto |
Βασικές Έννοιες
- Κύριος Άξονας (Main Axis): Οριζόντιος από προεπιλογή, ορίζεται από το flex-direction.
- Δευτερεύων Άξονας (Cross Axis): Η κατεύθυνση κάθετη στον κύριο άξονα.
Παραδείγματα Σεναρίων
Οριζόντια και κάθετη κεντράρισμα
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Κατανομή ίσου πλάτους
.item {
flex: 1; /* Ομοιόμορφη κατάληψη του υπόλοιπου χώρου */
}
Στοίχιση στα άκρα (Space Between)
.navbar {
display: flex;
justify-content: space-between;
}