Αυτή η εγγραφή θα αποτελέσει παράδειγμα της μεθόδου αποτροπής ανάπτυξης ή συρρίκνωσης των flex στοιχείων στο Tailwind CSS.
Πώς να αποτρέψετε την ανάπτυξη ή τη συρρίκνωση των εύκαμπτων αντικειμένων στο Tailwind;
Για να αποτρέψετε την ανάπτυξη και τη συρρίκνωση των ευέλικτων στοιχείων στο Tailwind, δημιουργήστε το αρχείο HTML. Στη συνέχεια, χρησιμοποιήστε το ' flex-grow-0 ' και ' flex-shrink-0 ” βοηθητικά προγράμματα με τα συγκεκριμένα στοιχεία flex στο πρόγραμμα HTML. Αυτά τα βοηθητικά προγράμματα δεν επιτρέπουν στα εύκαμπτα αντικείμενα να μεγαλώνουν ή να συρρικνώνονται ανάλογα με τον χώρο μέσα στο εύκαμπτο δοχείο. Μετά από αυτό, προσαρμόστε το μέγεθος οθόνης της ιστοσελίδας HTML για να διασφαλίσετε τις αλλαγές.
Ακολουθήστε τα προβλεπόμενα βήματα για την πρακτική εφαρμογή του:
Βήμα 1: Αποτρέψτε την ανάπτυξη και τη συρρίκνωση των στοιχείων Flex στο πρόγραμμα HTML
Φτιάξτε ένα πρόγραμμα HTML και χρησιμοποιήστε το ' flex-grow-0 ' και ' flex-shrink-0 ” βοηθητικά προγράμματα με τα επιθυμητά ευέλικτα αντικείμενα για να αποτρέψετε την ανάπτυξη ή τη συρρίκνωσή τους:
< σώμα >
< div τάξη = 'flex h-20' >
< div τάξη = 'flex-grow-0 bg-yellow-500 w-40 m-1' > 1 < / div >
< div τάξη = 'flex-shrink-0 bg-fuchsia-500 w-40 m-1' > 2 < / div >
< div τάξη = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div τάξη = 'flex-shrink bg-red-500 w-40 m-1' > 4 < / div >
< / div >
< / σώμα >
Εδώ:
- ' flex-grow-0 Η κλάση εμποδίζει το flex αντικείμενο να μεγαλώσει και να πάρει επιπλέον χώρο μέσα στο flex δοχείο όταν υπάρχει διαθέσιμος χώρος.
- ' flex-shrink-0 Η κλάση αποτρέπει τη συρρίκνωση και τη μείωση του εύκαμπτου στοιχείου εντός του εύκαμπτου δοχείου όταν ο χώρος είναι ανεπαρκής.
- ' flex-grow Η κλάση επιτρέπει στο flex αντικείμενο να μεγαλώσει και να καταλάβει τον διαθέσιμο χώρο μέσα στο flex container.
- ' flex-shrink Η κλάση επιτρέπει στο flex αντικείμενο να συρρικνωθεί εάν δεν υπάρχει αρκετός χώρος μέσα στο flex δοχείο.
Βήμα 2: Επαλήθευση εξόδου
Προβάλετε την ιστοσελίδα HTML και αλλάξτε το μέγεθος της οθόνης για να διασφαλίσετε ότι τα επιθυμητά ευέλικτα στοιχεία έχουν αποτραπεί από την ανάπτυξη και τη συρρίκνωση:
Η παραπάνω έξοδος δείχνει ότι το ευέλικτο στοιχείο '2' δεν συρρικνώνεται σε ανεπαρκή χώρο και το στοιχείο '1' δεν μεγαλώνει στον διαθέσιμο χώρο. Αυτό δείχνει ότι τα επιθυμητά εύκαμπτα αντικείμενα έχουν αποτραπεί από την ανάπτυξη και τη συρρίκνωση.
συμπέρασμα
Για να αποτρέψετε την ανάπτυξη και τη συρρίκνωση των εύκαμπτων στοιχείων στο Tailwind, χρησιμοποιήστε το ' flex-grow-0 ' και ' flex-shrink-0 ” βοηθητικά προγράμματα με τα επιθυμητά flex στοιχεία στο πρόγραμμα HTML. Για επαλήθευση, αλλάξτε και προβάλετε το μέγεθος οθόνης της ιστοσελίδας HTML. Αυτή η εγγραφή αποτελεί παράδειγμα της μεθόδου αποτροπής ανάπτυξης ή συρρίκνωσης των flex στοιχείων στο Tailwind CSS.