Είναι σημαντικό η διεπαφή χρήστη να είναι διαισθητική και ελκυστική. Ένας τρόπος για να επιτευχθεί αυτό είναι η χρήση του Flexbox στο CSS. Με το flexbox, μπορείτε όχι μόνο να ελέγχετε την ευθυγράμμιση και την τοποθέτηση των στοιχείων στη διάταξη, αλλά και να αλλάζετε την ορατότητα και τη σειρά των στοιχείων χωρίς να επηρεάζεται το DOM (Document Object Model). Σε αυτό το σεμινάριο, θα εξετάσουμε αναλυτικότερα την ιδιότητα order της CSS, η οποία σας επιτρέπει να αλλάζετε τη σειρά των στοιχείων flexbox, καθώς και τη χρήση της flex-direction για να αντιστρέφετε εύκολα τη σειρά εμφάνισης των στοιχείων.
Βασικά συμπεράσματα
- Η σειρά των ιδιοτήτων CSS επηρεάζει την ορατή σειρά των στοιχείων flexbox.
- Οι αλλαγές στη σειρά διάταξης δεν έχουν καμία επίδραση στην αρχική σειρά στο DOM.
- Η κατεύθυνση του flexbox μπορεί να αντιστραφεί με το flex-direction (π.χ. row-reverse) για να αλλάξει η εμφάνιση.
Οδηγίες βήμα προς βήμα
Για να δείξουμε πώς λειτουργεί η ιδιότητα order και τη δυνατότητα αντιστροφής της εμφάνισης με το flex-direction, θα ακολουθήσουμε τα παρακάτω βήματα:
1. Δημιουργία των βασικών στοιχείων του flexbox
Αρχικά, πρέπει να βεβαιωθείτε ότι ο περιέκτης σας έχει τις ιδιότητες flexbox. Για να το κάνετε αυτό, ορίστε τον κανόνα CSS display: flex; στο δοχείο σας.
2. Κατανοήστε τη σειρά των στοιχείων στο DOM
Κοιτάξτε την αρχική σειρά των στοιχείων στο DOM σας. Είναι σημαντικό να γνωρίζετε ότι η προεπιλεγμένη σειρά στο DOM είναι το σημείο εκκίνησης στο οποίο βασίζεται η σειρά flexbox.
3. Χρήση της ιδιότητας order
Για να επηρεάσετε την εμφάνιση των στοιχείων, μπορείτε να ορίσετε την ιδιότητα order σε αρνητικές τιμές. Από προεπιλογή, τα στοιχεία έχουν την τιμή 0. Εάν αναθέσετε την τιμή -1 σε ένα στοιχείο, αυτό τραβιέται οπτικά προς τα εμπρός.
4. Εφαρμογή οπτικής ταξινόμησης
Εάν θέλετε να ρυθμίσετε οπτικά το πρώτο στοιχείο, θα πρέπει να λάβετε υπόψη τα εξής: Η προεπιλεγμένη τιμή για την ιδιότητα order είναι 0. Για να εμφανίσετε ένα στοιχείο μπροστά από ένα άλλο, πρέπει να επιλέξετε μια μικρότερη τιμή. Είναι δυνατές αναθέσεις όπως -1, -2 ή ακόμη και αρνητικές τιμές εκατό.
5. Πραγματοποιήστε περαιτέρω ρυθμίσεις
Αλλάξτε τις τιμές διάταξης των υπόλοιπων στοιχείων. Για παράδειγμα, για να έχετε το δεύτερο στοιχείο στην πρώτη θέση, θα πρέπει να το επισημάνετε με -1 ή να του αναθέσετε μια τιμή μικρότερη από την τρέχουσα τιμή διάταξης.
6. Χρησιμοποιήστε αρνητική τιμή τάξης
Εάν χρησιμοποιήσετε την ιδιότητα order για να αλλάξετε μια σειρά, η οπτική σειρά ταξινομείται σε αύξουσα σειρά, με τη μικρότερη τιμή να έρχεται πρώτη.
7. αντιστροφή της κατεύθυνσης κάμψης
Ένα από τα πιο ισχυρά εργαλεία είναι η ιδιότητα flex-direction. Αν την ορίσετε σε row-reverse, η σειρά εμφάνισης αλλάζει από τα δεξιά προς τα αριστερά. Ελέγξτε πώς διατάσσονται οπτικά τα στοιχεία με αυτή την αλλαγή.
8. αλλαγή σειράς σε αντίστροφη κατεύθυνση
Αν χρησιμοποιήσετε την ιδιότητα flex-direction: column;, η διάταξη απεικονίζεται από πάνω προς τα κάτω. Ένα αρνητικό χαρακτηριστικό order μπορεί επίσης να χρησιμοποιηθεί σε αυτή την περίπτωση για να επηρεάσει τη σειρά.
9. Εφαρμογή σε πρόγραμμα ανάγνωσης οθόνης
Εάν θέλετε να εξετάσετε την οπτική σειρά για αναγνώστες οθόνης, είναι σημαντικό να γνωρίζετε ότι οι αναγνώστες οθόνης διαβάζουν την αρχική σειρά DOM. Ως εκ τούτου, οι οπτικές αναδιατάξεις με τη σειρά δεν είναι προσβάσιμες σε όλους τους χρήστες.
Περίληψη
Σε αυτόν τον οδηγό, μάθατε πώς να χρησιμοποιείτε την ιδιότητα order της CSS για να ελέγχετε την ορατότητα και τη σειρά των στοιχείων flexbox. Μάθατε επίσης πώς να αντιστρέφετε την εμφάνιση με την κατεύθυνση flex-direction για να κάνετε τις διατάξεις σας ακόμα πιο ευέλικτες και φιλικές προς το χρήστη. Να θυμάστε ότι οι οπτικές προσαρμογές στην εμφάνιση δεν αλλάζουν την υποκείμενη σειρά DOM, η οποία θα πρέπει να λαμβάνεται υπόψη για την προσβασιμότητα.
Συχνές ερωτήσεις
Πώς λειτουργεί η ιδιότητα order;Η ιδιότητα order επηρεάζει την ορατή σειρά των στοιχείων flexbox. Μια χαμηλότερη τιμή εμφανίζεται πρώτη.
Πώς μπορώ να αντιστρέψω την κατεύθυνση flex-direction;Ορίστε την ιδιότητα flex-direction σε row-reverse ή column-reverse για να αλλάξετε τη σειρά εμφάνισης.
Η ιδιότητα order επηρεάζει τη σειρά DOM;Όχι, η ιδιότητα order αλλάζει μόνο την οπτική εμφάνιση των στοιχείων, όχι τη σειρά στο DOM.
Τι συμβαίνει εάν οι τιμές της σειράς είναι ίδιες;Εάν οι τιμές της σειράς είναι ίδιες, η αρχική σειρά DOM χρησιμοποιείται για την εμφάνιση.
Πώς πρέπει να αντιμετωπίσω τα προγράμματα ανάγνωσης οθόνης;Δεδομένου ότι τα προγράμματα ανάγνωσης οθόνης διαβάζουν τη σειρά DOM, θα πρέπει να βεβαιωθείτε ότι η οπτική σειρά παραμένει προσβάσιμη σε όλους τους χρήστες.
