Αυτό το άρθρο θα επεξηγήσει τη μέθοδο παραγγελίας στοιχείων flex και grid στο Tailwind CSS.
Πώς να παραγγείλετε είδη Flex και Grid στο Tailwind;
Για να παραγγείλετε στοιχεία flex και grid στο Tailwind CSS, δημιουργήστε ένα αρχείο HTML. Στη συνέχεια, χρησιμοποιήστε το βοηθητικό πρόγραμμα 'παραγγελία-' και καθορίστε την τιμή παραγγελίας στο πρόγραμμα HTML για να αλλάξετε τη σειρά των στοιχείων flex και grid. Επιτρέπει στα ευέλικτα στοιχεία να αποδοθούν με διαφορετική σειρά από αυτή που εμφανίζονται στο DOM (Document Object Model). Για να διασφαλίσετε τις αλλαγές, προβάλετε την ιστοσελίδα HTML.
Δείτε τα βήματα που παρέχονται για καλύτερη κατανόηση:
Βήμα 1: Παραγγείλετε τα στοιχεία Flex και Grid σε πρόγραμμα HTML
Φτιάξτε ένα πρόγραμμα HTML και χρησιμοποιήστε το ' παραγγελία-<αλεύ> ” και καθορίστε την τιμή παραγγελίας για στοιχεία flex ή grid. Για παράδειγμα, χρησιμοποιήσαμε τα βοηθητικά προγράμματα «παραγγελία-3», «τελευταία παραγγελία», «πρώτη παραγγελία» και «παραγγελία-2».
< σώμα >
< div τάξη = 'flex h-20' >
< div τάξη = 'παραγγελία-3 bg-red-500 w-32 m-1' > 1 < / div >
< div τάξη = 'παραγγελία-τελευταία bg-κίτρινο-500 w-32 m-1' > 2 < / div >
< div τάξη = 'order-first bg-teal-500 w-32 m-1' > 3 < / div >
< div τάξη = 'παραγγελία-2 bg-πορτοκαλί-500 w-32 m-1' > 4 < / div >
< / div >
< / σώμα >
Εδώ:
- ' παραγγελία-3 Η κλάση ορίζει τη σειρά του στοιχείου στο 3 και το flex στοιχείο θα τοποθετηθεί ως το τρίτο στοιχείο μέσα στο flex container.
- ' παραγγελία-τελευταία ” Η κλάση ορίζει τη σειρά του στοιχείου ως το τελευταίο και θα είναι το τελευταίο στοιχείο εντός του εύκαμπτου κοντέινερ.
- ' παραγγελία-πρώτα Η κλάση προσδιορίζει τη σειρά του στοιχείου να είναι πρώτο και θα τοποθετηθεί ως το πρώτο στοιχείο μέσα στο flex container.
- ' παραγγελία-2 Η κλάση ορίζει τη σειρά του στοιχείου στο 2 και θα τοποθετηθεί ως το δεύτερο στοιχείο μέσα στο flex container.
- ' w-32 Η κλάση εφαρμόζει 32 μονάδες πλάτους σε κάθε ευέλικτο στοιχείο.
- ' m-1 Η κλάση προσθέτει 1 μονάδα περιθωρίου γύρω από κάθε ευέλικτο στοιχείο.
Βήμα 2: Επαληθεύστε την έξοδο
Δείτε την ιστοσελίδα HTML για να βεβαιωθείτε ότι τα στοιχεία flex και grid έχουν παραγγελθεί:
Μπορεί να παρατηρηθεί ότι τα στοιχεία flex και grid έχουν παραγγελθεί με επιτυχία σύμφωνα με την οποία καθορίστηκαν.
συμπέρασμα
Για να παραγγείλετε στοιχεία flex και grid στο Tailwind CSS, χρησιμοποιήστε το ' παραγγελία-<τιμή> ” βοηθητικό πρόγραμμα και καθορίστε την τιμή παραγγελίας για flex και grid στοιχεία στο πρόγραμμα HTML. Αναδιατάσσει τα στοιχεία flex και grid στην ιστοσελίδα. Για επαλήθευση, προβάλετε τις αλλαγές στην ιστοσελίδα HTML και διασφαλίστε τις αλλαγές. Αυτό το άρθρο παρουσιάζει τη μέθοδο παραγγελίας στοιχείων flex και grid στο Tailwind CSS.