Όλες οι συνηθισμένες ιδιότητες του flexbox, ομαδοποιημένες ανάλογα με το πού εφαρμόζονται: στο κοντέινερ και στο στοιχείο. Κάθε γραμμή συνδυάζει την ιδιότητα με τις συνηθισμένες τιμές της και με το τι κάνει.
Το flexbox τοποθετεί στοιχεία σε μία διάσταση: σε μια σειρά ή σε μια στήλη. Ορίστε display: flex στο γονικό στοιχείο και γίνεται το flex κοντέινερ· τα άμεσα παιδιά του γίνονται flex στοιχεία. Οι ιδιότητες του κοντέινερ ελέγχουν την κατανομή στον κύριο άξονα και στον κάθετο άξονα· οι ιδιότητες του στοιχείου ελέγχουν πώς ένα μεμονωμένο στοιχείο μεγαλώνει, συρρικνώνεται ή ευθυγραμμίζεται. Επιλέξτε flexbox για μονοδιάστατες μπάρες, σειρές και κεντράρισμα.
Πίνακας αναφοράς · 13 καταχωρήσεις
CSS FlexboxExplained
13 of 13 rows
Κοντέινερ
flex | inline-flex
Μετατρέπει το στοιχείο σε flex κοντέινερ.
row | column | row-reverse | column-reverse
Ορίζει τον κύριο άξονα κατά μήκος του οποίου ρέουν τα στοιχεία.
flex-start | center | space-between | space-around | space-evenly
Κατανέμει τα στοιχεία κατά μήκος του κύριου άξονα.
stretch | center | flex-start | flex-end | baseline
Ευθυγραμμίζει τα στοιχεία κατά μήκος του κάθετου άξονα.
flex-start | center | stretch | space-between
Ευθυγραμμίζει τις αναδιπλωμένες σειρές όταν υπάρχει επιπλέον χώρος στον κάθετο άξονα.
nowrap | wrap | wrap-reverse
Επιτρέπει στα στοιχεία να αναδιπλώνονται σε νέες γραμμές αντί να συρρικώνονται.
0.5rem | 8px 16px
Κενό ανάμεσα στα στοιχεία, οριζόντια και κάθετα.
Στοιχείο
0 | 1 | 2
Πόσο ελεύθερο χώρο απορροφά το στοιχείο σε σχέση με τα αδέλφια του.
0 | 1
Πόσο συρρικνώνεται το στοιχείο όταν δεν υπάρχει αρκετός χώρος.
auto | 200px | 50%
Το αρχικό μέγεθος πριν μοιραστεί ο ελεύθερος χώρος.
1 | 1 0 auto | 0 0 200px
Συντομογραφία για grow shrink basis.
auto | center | flex-start | flex-end | stretch
Αντικαθιστά το align-items του κοντέινερ για ένα στοιχείο.
0 | -1 | 2
Αλλάζει τη σειρά ενός στοιχείου χωρίς αλλαγή στον πηγαίο κώδικα.