Σε αυτόν τον οδηγό, θα μάθετε πώς να χρησιμοποιείτε το Flexbox για να ευθυγραμμίζετε τα στοιχεία σε ένα δοχείο flex κατά μήκος του κύριου άξονα. Έχουμε ήδη καλύψει την ευθυγράμμιση κατά μήκος του εγκάρσιου άξονα, αλλά ο κύριος άξονας είναι εξίσου σημαντικός. Η τεχνολογία Flexbox σας προσφέρει διάφορους τρόπους για να κάνετε την ευθυγράμμιση των στοιχείων σας ευέλικτη και προσαρμόσιμη. Ας ρίξουμε μια πιο προσεκτική ματιά!
Βασικές διαπιστώσεις
- Η ευθυγράμμιση στον κύριο άξονα γίνεται με την ιδιότητα justify-content.
- Μπορείτε να χρησιμοποιήσετε διάφορες τιμές όπως center, flex-start, flex-end, space-between και space-around για να προσαρμόσετε τη διάταξή σας.
- Οι ρυθμίσεις flexbox έχουν άμεση επίδραση στη διάταξη των στοιχείων προς την επιθυμητή κατεύθυνση.
Οδηγίες βήμα προς βήμα
1. Αρχικοποίηση του δοχείου flexbox
Ξεκινήστε δημιουργώντας ένα δοχείο flex και ορίζοντας την κατεύθυνση flex του. Σε αυτό το παράδειγμα, ορίζουμε την κατεύθυνση flex σε row. Αυτό σημαίνει ότι τα στοιχεία θα τοποθετηθούν σε μια σειρά από αριστερά προς τα δεξιά.
2. προεπιλεγμένη στοίχιση των στοιχείων
Αν τοποθετήσετε τα στοιχεία σας στο δοχείο χωρίς ειδικές ρυθμίσεις μορφοποίησης, θα δείτε ότι είναι εξ ορισμού ευθυγραμμισμένα στο επάνω μέρος του δοχείου. Μπορείτε να τους δώσετε πλάτος 100 pixels για να το οπτικοποιήσετε αυτό.
3. Στοίχιση στο κέντρο
Για να κεντράρετε τα στοιχεία, χρησιμοποιήστε την ιδιότητα CSS justify-content με την τιμή center. Αυτό ευθυγραμμίζει τα στοιχεία σας στο κέντρο του περιέκτη, με αποτέλεσμα μια πολύ ελκυστική διάταξη.
4. ευθυγράμμιση των στοιχείων στο τέλος
Αν θέλετε να ευθυγραμμίσετε τα στοιχεία σας στο τέλος του περιέκτη, μπορείτε να χρησιμοποιήσετε την τιμή flex-end για την ιδιότητα justify-content. Αυτό μετακινεί τα στοιχεία στο δεξιό άκρο του περιέκτη σας.
5. ευθυγράμμιση στοιχείων κατά την έναρξη
Η προεπιλεγμένη συμπεριφορά χωρίς προσαρμογή είναι flex-start, που σημαίνει ότι τα στοιχεία παραμένουν στην αρχή του περιέκτη. Αυτή η ρύθμιση είναι χρήσιμη αν θέλετε μια σαφή, τακτοποιημένη διάταξη των στοιχείων στην αρχή του περιέκτη.
6. Αλλαγή κατεύθυνσης flex
Αν αλλάξετε την κατεύθυνση flex σε στήλη, ο κύριος άξονας αλλάζει από οριζόντιο σε κατακόρυφο. Αυτό σημαίνει ότι τα στοιχεία διατάσσονται πλέον από πάνω προς τα κάτω.
7. κεντράρετε τα στοιχεία σε κάθετη στοίχιση
Μπορείτε επίσης να κεντράρετε τα στοιχεία σε αυτή τη νέα στοίχιση με τη χρήση justify-content: centre. Αυτή η ρύθμιση διασφαλίζει ότι όλα τα στοιχεία εμφανίζονται στο κέντρο του περιέκτη.
8. ευθυγράμμιση στο κάτω μέρος
Εάν θέλετε να εμφανίζονται τα στοιχεία στο κάτω μέρος του περιέκτη, μπορείτε να ορίσετε ξανά την ευθυγράμμιση flex-end. Αυτό τοποθετεί τα στοιχεία στο κάτω μέρος του περιέκτη.
9. Χρήση των ιδιοτήτων χώρου
Το Flexbox σας επιτρέπει επίσης να ελέγχετε το διάστημα μεταξύ των στοιχείων σας χρησιμοποιώντας τις ιδιότητες space-between, space-around και space-evenly. Αυτές οι ιδιότητες κατανέμουν τον διαθέσιμο χώρο με διαφορετικούς τρόπους.
10. Χρήση του space-between
Με την επιλογή justify-content: space-between, το πρώτο στοιχείο παραμένει στην κορυφή και το τελευταίο στοιχείο στο κάτω μέρος του περιέκτη, με τον χώρο μεταξύ των στοιχείων να κατανέμεται ομοιόμορφα.
11. Δοκιμάστε το space-around
Αν χρησιμοποιήσετε το space-around, δημιουργείται η ίδια ποσότητα χώρου γύρω από κάθε στοιχείο. Ο χώρος αυτός είναι ορατός στο κέντρο του περιέκτη, ενώ τα στοιχεία παραμένουν ομοιόμορφα κατανεμημένα.
12. Χρησιμοποιήστε το space-evenly
Η χρήση του space-evenly εξασφαλίζει ότι υπάρχει ίσος χώρος παντού μεταξύ των στοιχείων και της άκρης του δοχείου.
Περίληψη
Σε αυτόν τον οδηγό, μάθατε πώς να ορίζετε τη στοίχιση στον κύριο άξονα με το Flexbox. Χρησιμοποιώντας το justify-content, μπορείτε να είστε πολύ ευέλικτοι με την τοποθέτηση των στοιχείων σας. Μάθατε επίσης για διάφορες ιδιότητες που θα σας βοηθήσουν να επιτύχετε τη διάταξη που θέλετε. Χρησιμοποιήστε αυτές τις γνώσεις για να δημιουργήσετε ελκυστικά και φιλικά προς το χρήστη σχέδια!
