Το Tailwind CSS παρέχει ' στοίχιση-στοιχεία ” βοηθητικά προγράμματα για τον έλεγχο της θέσης των ειδών flex και grid κατά μήκος του εγκάρσιου άξονα του δοχείου. Διαθέτει διάφορες κατηγορίες βοηθητικών προγραμμάτων, όπως 'items-start', 'items-center', 'items-end', 'items-baseline', κ.λπ. Επιπλέον, οι χρήστες μπορούν επίσης να χρησιμοποιήσουν την ιδιότητα hover με 'items-
Αυτό το άρθρο θα παραδειγματίσει τη μέθοδο εφαρμογής του hover on align-items» βοηθητικά προγράμματα στο Tailwind CSS.
Πώς να εφαρμόσετε το Hover σε βοηθητικά προγράμματα 'align-items' στο Tailwind;
Για να εφαρμόσετε το δείκτη του ποντικιού στα βοηθητικά προγράμματα 'align-items' στο Tailwind, δημιουργήστε μια δομή HTML και προσθέστε το ' φτερουγίζω “Κλάση χρησιμότητας με την επιθυμητή” αντικείμενα-<τιμή> ” βοηθητικό πρόγραμμα στο δοχείο. Στη συνέχεια, ελέγξτε την ιστοσελίδα HTML και τοποθετήστε το δείκτη του ποντικιού στο καθορισμένο στοιχείο για να επαληθεύσετε τις αλλαγές.
Σύνταξη
< στοιχείο τάξη = 'hover:items-
Αντικαταστήστε την <τιμή> με μία από τις ακόλουθες επιλογές: 'έναρξη', 'κέντρο', 'τέλος', 'γραμμή βάσης' ή 'έκταση'.
Παράδειγμα
Σε αυτό το παράδειγμα, θα φτιάξουμε ένα εύκαμπτο κοντέινερ με την ιδιότητα 'items-start'. Στη συνέχεια, θα χρησιμοποιήσουμε το ' hover:items-center 'τάξη στην ' Παραγωγή Για την εφαρμογή του φαινομένου αιώρησης στα βοηθητικά προγράμματα 'align-items' στο Tailwind, χρησιμοποιήστε το ' φτερουγίζω «Κλάση χρησιμότητας με το συγκεκριμένο» αντικείμενα-<τιμή> ” στο δοχείο flex ή grid. Για επαλήθευση, τοποθετήστε το ποντίκι πάνω από το καθορισμένο κοντέινερ στην ιστοσελίδα. Αυτό το άρθρο παρουσίασε παραδείγματα για την εφαρμογή του φαινομένου αιώρησης σε βοηθητικά προγράμματα 'align-items' στο Tailwind.
< σώμα >
< div τάξη = 'flex items-start hover:items-center justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div τάξη = 'bg-pink-600 py-4 w-40' > 1 div >
< div τάξη = 'bg-pink-600 py-12 w-40' > 2 div >
< div τάξη = 'bg-pink-600 py-8 w-40' > 3 div >
div >
σώμα >
Εδώ:
Από την παραπάνω ιστοσελίδα, μπορεί να παρατηρηθεί ότι η ευθυγράμμιση των ευέλικτων στοιχείων αλλάζει κατά μήκος του εγκάρσιου άξονα του κοντέινερ κατά την αιώρηση. συμπέρασμα