Το Flexbox ή το flex container είναι μια διάταξη που επιτρέπει στους χρήστες να ευθυγραμμίζουν και να διανέμουν στοιχεία μέσα σε ένα κοντέινερ. Το Tailwind CSS προσφέρει διάφορες κατηγορίες βοηθητικών προγραμμάτων για δημιουργία και εργασία με το flexbox. Ένα εύκαμπτο κοντέινερ σε επίπεδο κουτιού είναι ένα εύκαμπτο κοντέινερ που συμπεριφέρεται/λειτουργεί σαν στοιχείο σε επίπεδο μπλοκ και δημιουργεί ένα μπλοκ. Καταλαμβάνει όλο το πλάτος του γονικού του στοιχείου και δημιουργεί μια νέα γραμμή μετά τον εαυτό του.
Αυτή η εγγραφή θα αποτελεί παράδειγμα της μεθόδου δημιουργίας ενός εύκαμπτου κοντέινερ σε επίπεδο μπλοκ στο Tailwind.
Πώς να δημιουργήσετε/δημιουργήσετε ένα κοντέινερ Flex επιπέδου Block στο Tailwind;
Για να δημιουργήσετε ένα συγκεκριμένο εύκαμπτο κοντέινερ σε επίπεδο μπλοκ στο Tailwind, δημιουργήστε μια δομή HTML. Στη συνέχεια, προσθέστε το ' καλώδιο ” κλάση βοηθητικού προγράμματος με το επιθυμητό
Σύνταξη
< div τάξη = 'fllex...' >
...
div >
Κώδικας
< σώμα >
< div τάξη = 'flex gap-2 m-2 border-2 border-black' >
< div τάξη = 'bg-yellow-500 p-4' > Πρώτο Στοιχείο div >
< div τάξη = 'bg-yellow-500 p-4' > Δεύτερο Στοιχείο div >
< div τάξη = 'bg-yellow-500 p-4' > Τρίτο Στοιχείο div >
div >
σώμα >
Εδώ, στο γονικό κοντέινερ
-
- ' καλώδιο Η κλάση χρησιμοποιείται για τη δημιουργία ενός εύκαμπτου κοντέινερ σε επίπεδο μπλοκ.
- ' κενό-2 Η τάξη προσθέτει 2 μονάδες απόστασης μεταξύ των θυγατρικών στοιχείων του flex.
- ' m-2 Η κλάση προσθέτει 2 μονάδες περιθωρίου σε όλες τις πλευρές του δοχείου.
- ' σύνορο-2 Η κλάση προσθέτει το περίγραμμα στο κοντέινερ με πλάτος 2 μονάδων.
- ' σύνορα-μαύρο Η κλάση ορίζει το χρώμα περιγράμματος σε μαύρο.
Στα στοιχεία του παιδιού flex:
-
- ' bg-κίτρινο-500 Η τάξη ” εφαρμόζει ένα κίτρινο χρώμα στο φόντο του ευέλικτου στοιχείου.
- ' σελ-4 Η κλάση προσθέτει την επένδυση 4 μονάδων σε όλες τις πλευρές των flex αντικειμένων.
Παραγωγή
Στην παραπάνω έξοδο, το περίγραμμα αντιπροσωπεύει ότι το κοντέινερ είναι ένα εύκαμπτο κοντέινερ σε επίπεδο μπλοκ, το οποίο καταλαμβάνει ολόκληρο το πλάτος του γονικού του στοιχείου (πρόγραμμα περιήγησης).
Εναλλακτικά, ο χρήστης μπορεί να το διασφαλίσει επιθεωρώντας το στοιχείο flex container στην ιστοσελίδα:
Η παραπάνω έξοδος υποδεικνύει ότι το δοχείο είναι ένα εύκαμπτο δοχείο σε επίπεδο μπλοκ.
Συμπέρασμα:
Για να δημιουργήσετε ένα εύκαμπτο κοντέινερ σε επίπεδο μπλοκ στο Tailwind, απαιτείται να προσθέσετε το ' καλώδιο ” κλάση χρησιμότητας με το συγκεκριμένο κοντέινερ και καθορίστε τα θυγατρικά στοιχεία του. Οι χρήστες μπορούν να ορίσουν και να τροποποιήσουν ευέλικτα στοιχεία σύμφωνα με τις ανάγκες τους. Για επαλήθευση, προσθέστε το περίγραμμα στο κοντέινερ και προβάλετε την ιστοσελίδα ή επιθεωρήστε αυτό το στοιχείο στην ιστοσελίδα. Αυτό το άρθρο έχει εξηγήσει τη μέθοδο δημιουργίας ενός εύκαμπτου κοντέινερ σε επίπεδο μπλοκ στο Tailwind.