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