Πίνακας Συντομεύσεων Διάταξης CSS Flexbox
Αυτή η σελίδα παρέχει έναν οπτικό πίνακα συντομεύσεων για τη διάταξη CSS Flexbox, συμπεριλαμβανομένων των ιδιοτήτων του κοντέινερ, των ιδιοτήτων των στοιχείων και κοινών παραδειγμάτων διάταξης.
Ιδιότητες Κοντέινερ (Container Properties)
| Ιδιότητα | Τιμή | Περιγραφή |
|---|---|---|
display |
flex |
Ενεργοποιεί την ελαστική διάταξη (Flex) |
flex-direction |
row |
Ο κύριος άξονας είναι οριζόντιος, αφετηρία στα αριστερά |
row-reverse |
Ο κύριος άξονας είναι οριζόντιος, αφετηρία στα δεξιά | |
column |
Ο κύριος άξονας είναι κάθετος, αφετηρία στο πάνω μέρος | |
column-reverse |
Ο κύριος άξονας είναι κάθετος, αφετηρία στο κάτω μέρος | |
flex-wrap |
nowrap |
Προεπιλεγμένη τιμή, τα στοιχεία διατάσσονται σε μία γραμμή |
wrap |
Τα στοιχεία αλλάζουν γραμμή | |
wrap-reverse |
Τα στοιχεία αλλάζουν γραμμή με αντίστροφη σειρά | |
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 |
Στοίχιση δευτερεύοντος άξονα (πολλαπλές γραμμές): πλήρης στοίχιση, ίσα κενά μεταξύ των γραμμών | |
space-around |
Στοίχιση δευτερεύοντος άξονα (πολλαπλές γραμμές): ίσα κενά γύρω από τις γραμμές | |
stretch |
Προεπιλεγμένη τιμή, στοίχιση δευτερεύοντος άξονα (πολλαπλές γραμμές): τέντωμα για γέμισμα του υπόλοιπου χώρου |
Ιδιότητες Στοιχείων (Item Properties)
| Ιδιότητα | Τιμή | Περιγραφή |
|---|---|---|
flex-grow |
number |
Ορίζει την αναλογία μεγέθυνσης του στοιχείου, προεπιλογή 0 (δεν μεγεθύνεται) |
flex-shrink |
number |
Ορίζει την αναλογία σμίκρυνσης του στοιχείου, προεπιλογή 1 |
flex-basis |
auto |
Ορίζει το προεπιλεγμένο μέγεθος του στοιχείου πριν από τη διανομή του υπόλοιπου χώρου |
align-self |
auto |
Επιτρέπει την ξεχωριστή στοίχιση ενός στοιχείου, παρακάμπτοντας την ιδιότητα align-items |
flex-start |
Το στοιχείο τοποθετείται στην αρχή του κοντέινερ | |
flex-end |
Το στοιχείο τοποθετείται στο τέλος του κοντέινερ | |
center |
Το στοιχείο τοποθετείται στο κέντρο | |
baseline |
Η γραμμή βάσης του στοιχείου στοιχίζεται με τη γραμμή βάσης του κοντέινερ | |
stretch |
Το στοιχείο τεντώνεται για να γεμίσει το κοντέινερ (αν το κοντέινερ έχει ύψος) |
Κοινά Παραδείγματα Διάταξης
| Διάταξη | Ιδιότητες Κοντέινερ | Ιδιότητες Στοιχείου |
|---|---|---|
| Οριζόντια γραμμή πλοήγησης | display: flex;justify-content: space-around; |
|
| Κάθετη πλευρική στήλη | display: flex;flex-direction: column;justify-content: flex-start; |
|
| Διάταξη πλέγματος (Grid) | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| Διάταξη καρτών | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |