Αυτό το άρθρο θα εξηγήσει τη μέθοδο για να αποτρέψετε την αναδίπλωση ευέλικτων στοιχείων σε Tailwind CSS.
Πώς να αποτρέψετε/να σταματήσετε το τύλιγμα των εύκαμπτων αντικειμένων στο Tailwind;
Για να σταματήσετε την αναδίπλωση των ευέλικτων στοιχείων στο Tailwind, δημιουργήστε ένα αρχείο HTML. Στη συνέχεια, χρησιμοποιήστε το βοηθητικό πρόγραμμα 'flex-nowrap' με το κοντέινερ flex στο πρόγραμμα HTML για να αποτρέψετε την αναδίπλωση των εύκαμπτων στοιχείων. Στη συνέχεια, βεβαιωθείτε για τις αλλαγές προβάλλοντας την ιστοσελίδα HTML.
Δοκιμάστε τα παρακάτω βήματα για να το καταλάβετε καλύτερα:
Βήμα 1: Αποτρέψτε την αναδίπλωση των στοιχείων Flex σε πρόγραμμα HTML
Φτιάξτε ένα πρόγραμμα HTML και χρησιμοποιήστε το ' flex-nowrap ” βοηθητικό πρόγραμμα με το επιθυμητό εύκαμπτο δοχείο για να αποτρέψετε το τύλιγμα των εύκαμπτων αντικειμένων:
< σώμα >
< div τάξη = 'flex flex-nowrap h-40' >
< div τάξη = 'βάση-1/4 bg-red-500 m-1' > 1 < / div >
< div τάξη = 'βάση-1/3 bg-κίτρινο-500 m-1' > 2 < / div >
< div τάξη = 'βάση-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / σώμα >
Εδώ:
- ' καλώδιο ” η κλάση ενεργοποιεί τη διάταξη flexbox στο στοιχείο και επιτρέπει στα θυγατρικά στοιχεία να τακτοποιηθούν και να ευθυγραμμιστούν.
- ' flex-nowrap Η κλάση ” προσδιορίζει ότι τα ευέλικτα στοιχεία δεν πρέπει να τυλίγονται σε πολλές γραμμές και να διατηρούν όλα τα ευέλικτα στοιχεία σε μία γραμμή.
- Ο ' βάση-1/4 », « βάση-1/3 ', και ' βάση-1/2 Οι τάξεις καθορίζουν το εσωτερικό
Το πλάτος του είναι 25%, 33,33% και 50% των μητρικών στοιχείων τους, αντίστοιχα.
Βήμα 2: Επαλήθευση εξόδου
Για να βεβαιωθείτε ότι τα ευέλικτα στοιχεία δεν έχουν αναδιπλωθεί, δείτε την ιστοσελίδα HTML:
Στην παραπάνω ιστοσελίδα, τα ευέλικτα στοιχεία βρίσκονται σε μία γραμμή και δεν έχουν αναδιπλωθεί.
συμπέρασμα
Για να αποτρέψετε την αναδίπλωση των flex αντικειμένων στο Tailwind, χρησιμοποιήστε το βοηθητικό πρόγραμμα 'flex-nowrap' με το επιθυμητό flex κοντέινερ στο πρόγραμμα HTML. Αυτό το βοηθητικό πρόγραμμα αποτρέπει το τύλιγμα των εύκαμπτων αντικειμένων. Για επαλήθευση, δείτε τις αλλαγές στην ιστοσελίδα. Αυτό το άρθρο επεξηγεί τη μέθοδο αποτροπής της αναδίπλωσης ευέλικτων στοιχείων σε Tailwind CSS.