Η απίστευτη δύναμη του FlexBox

Sep 11, 2025

πως να

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

Basics FlexBox

Στην πιο βασική μορφή του, το FlexBox αποτελείται από δύο στοιχεία: ένα φλεξιακό δοχείο (ή Flex γονέα) και τα είδη Flex (Flex Children). Ένα δοχείο εύκαμπτου είναι ένα στοιχείο που περιέχει (όπως ένα δίνω ) Δεδομένης της ιδιότητας εμφάνισης καλώδιο . Τα στοιχεία Flex είναι τα στοιχεία παιδιών ενός δοχείου Flex, η οποία μπορεί να χειριστεί μέσω διαφόρων ιδιοτήτων οθόνης.

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

Πώς να χρησιμοποιήσετε το FlexBox

Για να αρχίσετε να χρησιμοποιείτε το FlexBox, πρέπει πρώτα να δημιουργήσετε το Flex Container (το γονικό στοιχείο που θα περιέχει τα στοιχεία Flex). Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε ένα δίνω ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ. Πριν τοποθετήσουμε το στοιχείο, ας προσθέσουμε τρία ακόμα δίνω μπλοκάρει μέσα στο δοχείο flex για να λειτουργήσει ως τα είδη flex. Σε αυτό το σημείο, τα στοιχεία θα στοιβάζονται.

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

 Flex Container {
Εμφάνιση: Flex;
}

Οδηγίες διάταξης

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

 Flex Container {
Εμφάνιση: Flex;
Κατεύθυνση Flex: Σειρά;
}

Flex Container {
Εμφάνιση: Flex;
Κατευθυντήριες γραμμές: στήλη;
}

Όποια κατεύθυνση που θέσατε στο Flex Container σας αναφέρεται ως «κύρια» κατεύθυνση, ενώ η άλλη κατεύθυνση που δεν επιλέξατε γίνεται η κατεύθυνση «Σταυρός». Έτσι, από προεπιλογή, η κύρια κατεύθυνση θα είναι οριζόντια και η διασταυρούμενη κατεύθυνση θα είναι κάθετη.

Το FlexBox σας επιτρέπει επίσης να αντιστρέψετε τη διάταξη. Όταν αντιστραφεί, τα παιδιά ενός δοχείου flex θα τοποθετηθούν δεξιά προς τα αριστερά (αν η κατεύθυνση είναι σειρά ) ή κάτω προς τα πάνω (εάν η κατεύθυνση είναι στήλη ).

 Flex Container {
Εμφάνιση: Flex;
Κατεύθυνση Flex: Reverse Row.
}

Flex Container {
Εμφάνιση: Flex;
Κατεύθυνση λυγμού: Αντίστροφη στήλη.
}

Αυτό μπορεί να έρθει σε χρήσιμο εάν θέλετε να αντιστρέψετε τη διάταξη σε μικρότερες οθόνες.

Για παράδειγμα, ας πούμε σε οθόνες επιφάνειας εργασίας που θέλετε να εμφανίσετε κείμενο στην αριστερή πλευρά της οθόνης και μια εικόνα στα δεξιά (βλ. Εικόνα Surfboard παραπάνω). Στο κινητό, αυτό θα μετακινήσει την εικόνα κάτω από το κείμενο. Αναστρέφοντας την κατεύθυνση, μπορείτε να βεβαιωθείτε ότι η εικόνα εμφανίζεται πάνω από το κείμενο.

Ρυθμίστε την ευθυγράμμιση

Οι ρυθμίσεις του FlexBox σας δίνουν επίσης δύο διαφορετικές μεθόδους για την ευθυγράμμιση του περιεχομένου: κάθετα και οριζόντια. Εδώ είναι οι οριζόντιες επιλογές ευθυγράμμισης για αντικείμενα μέσα σε ένα Flex Container:

εκκίνηση εύκαμπτου : Αντικείμενα που έχουν οριστεί προς την αρχή της σειράς (αριστερά, εκτός αν αντιστρέψατε τη διάταξη)

κέντρο : Αντικείμενα που επικεντρώνονται στη σειρά

λυτρωμένος : Αντικείμενα που τοποθετούνται προς το τέλος της σειράς (δεξιά, εκτός αν αντιστρέψατε τη διάταξη)

space-μεταξύ : Αντικείμενα που διανέμονται ομοιόμορφα κατά μήκος της σειράς

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

Έτσι ο κώδικας μπορεί να μοιάζει με αυτό:

 Flex Container {
Εμφάνιση: Flex;
Κατεύθυνση Flex: Σειρά;
Ευθυγραμμίστε-περιεχόμενο: Flex-Start | flex-end | κέντρο διαστήματος μεταξύ | χώρος-γύρω | τέντωμα;
}

Εδώ είναι οι επιλογές κάθετης ευθυγράμμισης για αντικείμενα σε ένα δοχείο Flex:

εκκίνηση εύκαμπτου : Αντικείμενα ευθυγραμμισμένα με την κορυφή της σειράς

κέντρο : Τα στοιχεία είναι κεντραρισμένα μέσα στη σειρά

λυτρωμένος : Αντικείμενα ευθυγραμμισμένα με το κάτω μέρος της σειράς

τέντωμα : Αντικείμενα που τεντώνονται στο ύψος της σειράς

βασική γραμμή : Αντικείμενα ευθυγραμμισμένα με τις βασικές γραμμές τους (η φανταστική γραμμή που κάθεται κείμενο)

Ο κώδικας μπορεί να μοιάζει με αυτό:

 Flex Container {
Εμφάνιση: Flex;
Κατεύθυνση Flex: Σειρά;
Ευθυγράμμιση-αντικείμενα: Flex-Start | flex-end | κέντρο Βασική γραμμή | τέντωμα;
}

Από προεπιλογή, τα παιδιά του Flex Container θα προσπαθήσουν πάντα να ταιριάζουν σε μια μόνο γραμμή. Αν θέλετε να αλλάξετε αυτό, μπορείτε να προσθέσετε το κάλυμμα Χαρακτηριστικό. Αυτό επιτρέπει στα παιδιά να τυλίγονται σε μια νέα γραμμή αν εξαντληθούν χώρος.

 Flex Container {
Εμφάνιση: Flex;
Flex-Wrap: Wrap;
}

Τα αντικείμενα Flex παίρνουν επίσης τις δικές τους ιδιότητες με βάση το Flex. Όταν ένα στοιχείο τοποθετείται μέσα σε ένα δοχείο εύκαμπτου, γίνεται αυτόματα ένα παιδί flex και χορηγείται το δικό του σετ των στυλ CSS με βάση το Flex. Αυτά τα στυλ ελέγχου μεγέθους, η ευθυγράμμιση και η σειρά εμφάνισης.

Εύκαμπτο μέγεθος

Τα παιδιά Flex μπορούν να αλλάξουν το πλάτος ή το ύψος τους (ανάλογα με την κατεύθυνση διάταξης του δοχείου) για να καλύψουν το διαθέσιμο χώρο.

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

 Φλαντικό στοιχείο {
flex-shrink: & lt; αριθμός & gt ;;
Flex-Grow: & lt; αριθμός & gt ;;
Flex-Base: & lt; μήκος & gt; | αυτο;
}

Ας ρίξουμε μια ματιά σε αυτό που καθένας από αυτές τις επιλογές κάνει:

Συρρίκνωση αν χρειαστεί: Μεγέθη το στοιχείο που βασίζεται στο πλάτος / ύψος ή το περιεχόμενό του. Το στοιχείο δεν θα αυξηθεί μεγαλύτερο από αυτό που χρειάζεται, αλλά μπορεί να συρρικνωθεί στο ελάχιστο μέγεθος για να αποφευχθεί η υπερχείλιση
Συμπληρώστε κενό χώρο: Επιτρέπει στο στοιχείο να επεκταθεί για να γεμίσει όλο το διαθέσιμο χώρο μέσα στον γονέα του. Εάν ορίσετε αυτό σε όλα τα στοιχεία σε ένα φανατικό δοχείο, θα επεκταθούν για να αναλάβουν ίσες ποσότητες κενού χώρου
Μην συρρικνωθεί: Μεγέθη το στοιχείο που βασίζεται στο πλάτος / ύψος ή το περιεχόμενό του, αλλά δεν το επιτρέπει να συρρικνωθεί, ακόμα κι αν αυτό θα προκαλέσει υπερχείλιση

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

 Φλαντικό στοιχείο {
Εμφάνιση: Flex;
Κατεύθυνση Flex: Σειρά;
Ευθυγράμμιση-αντικείμενα: Flex-Start | flex-end | κέντρο Βασική γραμμή | τέντωμα;
}

Από προεπιλογή, εμφανίζονται τα στοιχεία FLEX με την ίδια σειρά όπως εμφανίζονται στον πηγαίο κώδικα. Με το FlexBox, μπορείτε να αντικαταστήσετε αυτή τη συμπεριφορά για να εξασφαλίσετε ότι τα στοιχεία εμφανίζονται ακριβώς στην εντολή που θέλετε.

Οι τέσσερις κύριες επιλογές μπορείτε να χρησιμοποιήσετε εδώ:

Αυτο : Η προεπιλεγμένη τιμή, η οποία διατάζει τα στοιχεία όπως είναι στην πηγή
Πρώτα : Το στοιχείο εμφανίζεται πρώτα στο Flex Container
τελευταίος : Το στοιχείο εμφανίζεται τελευταία στο δοχείο Flex
Εθιμο : Μπορείτε να προσαρμόσετε την παραγγελία που θα εμφανιστεί το στοιχείο σας

Η προσαρμοσμένη εντολή μπορεί να οριστεί ως ένας αριθμός, ο οποίος καθορίζει την παραγγελία στην οποία εμφανίζεται το στοιχείο FLEX μέσα σε ένα δοχείο Flex.

 Φλαντικό στοιχείο {
Παραγγελία: & LT; Integer & GT ;;
}

Γιατί πρέπει να το χρησιμοποιήσω;

Χαίρομαι που ρωτήσατε! Η χρήση του FlexBox σας επιτρέπει να δημιουργείτε εύκολα να δημιουργήσετε ανταποκρινόμενες διατάξεις που ήταν πολύ δύσκολο (ή αδύνατο) για να δημιουργήσετε με παλαιότερες μονάδες διάταξης CSS.

Ρίξτε μια ματιά στα παραδείγματα στην παρακάτω εικόνα - πολλά από τα οποία ίσως έχετε ήδη δει ήδη από τον ιστό. Σχεδόν όλοι αυτοί θα χρειαζόταν μια σημαντική ποσότητα CSS (ειδικά σε διαφορετικά μεγέθη οθόνης), αλλά λαμβάνουν μόνο μερικές απλές γραμμές για να επιτύχουν με το FlexBox. Για να δείτε αυτά τα παραδείγματα σε δράση, επίσκεψη flexbox.webflow.com .

Η απίστευτη δύναμη του FlexBox

Basics FlexBox

Πώς να χρησιμοποιήσετε το FlexBox

Οδηγίες διάταξης

Ρυθμίστε την ευθυγράμμιση

Εύκαμπτο μέγεθος

Γιατί πρέπει να το χρησιμοποιήσω;

πως να - Τα πιο δημοφιλή άρθρα

Ξεκινήστε με τον ζωγράφο Flame

Μάθετε να μοντελοποιήσετε ένα άτομο σε ZBrush και Maya

Πώς να δημιουργήσετε glazes με ακουαρέλα

Master The Bridge Tool

Πώς να προετοιμάσετε τα γραφικά του εικονογράφου για μετά τα αποτελέσματα

Δημιουργία προσαρμοσμένων βούρτσες στο Clip Studio Paint

Ανακαλύψτε υπολείμματα και πώς να το χρησιμοποιήσετε το καλύτερο

Κορυφαίες συμβουλές για γλυπτική ένα πλάσμα σε ZBrush

Κατηγορίες