Cheat Sheet διάταξης CSS Flexbox

Το μοντέλο διάταξης 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;
}