Στο σημερινό σεμινάριο, θα εξετάσουμε μια ενδιαφέρουσα άσκηση με θέμα την "Τάξη" στο Flexbox. Θα μάθετε πώς να αναδιατάξετε τη σειρά των στοιχείων σε ένα δοχείο flexbox με δύο διαφορετικούς τρόπους. Θα χρησιμοποιήσουμε τις προσεγγίσεις με κλάσεις CSS καθώς και την ιδιότητα flexbox flex-direction. Στο τέλος αυτού του οδηγού, θα είστε σε θέση όχι μόνο να κατανοήσετε τη σειρά των στοιχείων, αλλά και να την υλοποιήσετε αποτελεσματικά. Ας ξεκινήσουμε!
Βασικές γνώσεις
- Μπορείτε να αλλάξετε τη σειρά των στοιχείων flex χρησιμοποιώντας την ιδιότητα order.
- Μια εναλλακτική μέθοδος διάταξης των στοιχείων είναι η ιδιότητα flex-direction, η οποία σας επιτρέπει να καθορίσετε τη σειρά.
Οδηγίες βήμα προς βήμα
Για να αλλάξουμε τη σειρά του περιεχομένου σε ένα δοχείο flex, δημιουργούμε πρώτα μια απλή διάταξη. Για να γίνει αυτό, μπορείτε να πάρετε ένα έγγραφο HTML που περιέχει πέντε στοιχεία div τα οποία θέλουμε να αναδιατάξουμε. Οι αριθμοί στα στοιχεία div αντιπροσωπεύουν την τρέχουσα σειρά από το 5 έως το 1.
Για το πρώτο βήμα, ανοίξτε το αρχείο HTML και εισάγετε τη δομή. Τα στοιχεία div θα πρέπει να επισημαίνονται με τις κλάσεις L1, L2, L3, L4 και L5.
Τώρα που έχετε δημιουργήσει τη βασική δομή, θέλουμε να βεβαιωθούμε ότι η αρχική σειρά των στοιχείων είναι από αριστερά προς τα δεξιά από το 5 στο 1. Ο στόχος είναι να εμφανίζονται τα στοιχεία με αύξουσα σειρά από το 1 έως το 5.
Για να το πετύχετε αυτό, χρησιμοποιήστε την ιδιότητα order στο CSS σας για κάθε στοιχείο. Ξεκινήστε θέτοντας τις τιμές της τάξης έτσι ώστε το L1 να έχει τάξη 5, το L2 να έχει τάξη 4 κ.ο.κ. μέχρι το L5, το οποίο έχει τάξη 1.
Αν στη συνέχεια αποθηκεύσετε τις αλλαγές σας στο πρόγραμμα περιήγησης και επαναφορτώσετε τη σελίδα, θα πρέπει τώρα να δείτε τα στοιχεία με τη σωστή σειρά από το 1 έως το 5.
Ωστόσο, όπως έχει ήδη αναφερθεί, υπάρχουν δύο τρόποι για να λύσετε αυτή την εργασία. Ο πρώτος τρόπος είναι να χρησιμοποιήσετε την ιδιότητα order που περιγράφηκε παραπάνω. Ο δεύτερος τρόπος, τον οποίο θα εξετάσουμε τώρα, χρησιμοποιεί την ιδιότητα flex-direction.
Για να εξερευνήσετε τις άλλες δυνατότητες, σχολιάστε πρώτα τις ιδιότητες order στο αρχείο CSS σας, ώστε να μπορέσουμε να δοκιμάσουμε τη νέα μέθοδο χωρίς να χάσουμε την προηγούμενη.
Τώρα μπορείτε να χρησιμοποιήσετε την ιδιότητα flex-direction για το δοχείο. Από προεπιλογή, έχει οριστεί σε γραμμή. Την αλλάζουμε σε row-reverse, η οποία θα πρέπει να προκαλέσει την αντιστροφή της σειράς των στοιχείων.
Αφού αλλάξετε την flex-direction σε row-reverse, αποθηκεύστε ξανά το αρχείο σας και φορτώστε την προεπισκόπηση στο πρόγραμμα περιήγησης. Τώρα θα πρέπει να βλέπετε τα στοιχεία στη σωστή σειρά από το 1 έως το 5 χωρίς να χρειάζεται να χρησιμοποιήσετε την ιδιότητα order.
Ένα άλλο παράδειγμα που μπορείτε να δοκιμάσετε είναι η χρήση της κατεύθυνσης column-reverse για να τακτοποιήσετε τα στοιχεία κάθετα. Αυτό ταξινομεί τη διάταξη από κάτω προς τα πάνω.
Τώρα θα πρέπει να κατανοήσετε σαφώς τις δύο μεθόδους για την αλλαγή της σειράς των στοιχείων flex: την ιδιότητα order και την ιδιότητα flex-direction. Και οι δύο μέθοδοι σας προσφέρουν διαφορετικές προσεγγίσεις για να προσαρμόσετε την εμφάνιση του περιεχομένου σας.
Περίληψη
Σε αυτόν τον οδηγό, μάθατε πώς να χειρίζεστε τη σειρά των στοιχείων σε ένα δοχείο flex. Γνωρίζετε τώρα πώς να χρησιμοποιείτε την ιδιότητα order και πώς να προσαρμόζετε την ιδιότητα flex-direction για να αλλάζετε την εμφάνιση των στοιχείων σας τόσο οριζόντια όσο και κάθετα. Πειραματιστείτε με αυτές τις προσεγγίσεις για να αναπτύξετε μια καλύτερη κατανόηση των διατάξεων flexbox.
Συχνές ερωτήσεις
Πώς μπορώ να αλλάξω τη σειρά των στοιχείων flex με την ιδιότητα order;Μπορείτε να αναθέσετε την ιδιότητα order σε κάθε στοιχείο και να ορίσετε τις τιμές για να τα εμφανίσετε με την επιθυμητή σειρά.
Υπάρχει τρόπος να αλλάξετε τη σειρά χωρίς σειρά;Ναι, μπορείτε να ορίσετε την ιδιότητα flex-direction σε row-reverse ή column-reverse για να αλλάξετε τη σειρά.
Το ποια από τις δύο μεθόδους είναι καλύτερο να χρησιμοποιήσετεεξαρτάται από τις συγκεκριμένες απαιτήσεις σας και την επιθυμητή στρατηγική διάταξης. Και οι δύο μέθοδοι είναι αποτελεσματικές.
