Στο Tailwind CSS, το ' διάστημα μεταξύ Τα βοηθητικά προγράμματα χρησιμοποιούνται για τον έλεγχο του χώρου μεταξύ των θυγατρικών στοιχείων των εύκαμπτων ή πλέγματος δοχείων. Προσφέρει διάφορες κλάσεις, όπως 'space-x-
Αυτός ο οδηγός θα εξηγήσει τη μέθοδο χρήσης μιας αρνητικής τιμής διαστήματος στο Tailwind.
Πώς να χρησιμοποιήσετε μια αρνητική τιμή χώρου στο Tailwind;
Για να χρησιμοποιήσετε μια αρνητική τιμή διαστήματος στο Tailwind, πρώτα δημιουργήστε μια δομή HTML. Στη συνέχεια, χρησιμοποιήστε την παύλα ' – ' με το επιθυμητό 'κενό μεταξύ' των τάξεων χρησιμότητας για να το μετατρέψετε σε αρνητική τιμή. Ο ' -space-x-<τιμή> ' και ' -space-y-<τιμή> Τα βοηθητικά προγράμματα χρησιμοποιούνται συχνά για την τοποθέτηση ενός στοιχείου μέσα σε ένα άλλο στοιχείο.
Ας δούμε τα παρακάτω παραδείγματα για να το καταλάβουμε καλύτερα.
Παράδειγμα 1: Εφαρμόστε μια αρνητική οριζόντια απόσταση μεταξύ των στοιχείων
Σε αυτό το παράδειγμα, έχουμε ένα εύκαμπτο κοντέινερ με ορισμένα θυγατρικά στοιχεία στη σειρά. Θα χρησιμοποιήσουμε το « -space-x-8 Κατηγορία για την εφαρμογή της αρνητικής οριζόντιας απόστασης μεταξύ εύκαμπτων στοιχείων:
< σώμα >< div τάξη = 'flex -space-x-8 m-10 h-20 w-max' >
< div τάξη = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div τάξη = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div τάξη = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div τάξη = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div τάξη = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div τάξη = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
σώμα >
Εδώ, στο στοιχείο γονείς
-
- ' καλώδιο ” Η τάξη δημιουργεί μια ευέλικτη διάταξη.
- ' -space-x-8 Η κλάση προσθέτει 8 μονάδες αρνητικής οριζόντιας απόστασης μεταξύ εύκαμπτων στοιχείων μέσα σε ένα δοχείο.
- ' m-10 Η κλάση προσθέτει ένα περιθώριο 10 μονάδων σε όλες τις πλευρές του δοχείου.
- ' h-20 Η κλάση ορίζει το ύψος του δοχείου σε 20 μονάδες.
- ' w-max Η κλάση θέτει το πλάτος του κοντέινερ στο μέγιστο πλάτος περιεχομένου.
Στα στοιχεία του παιδιού
-
- ' bg-teal-500 Η τάξη θέτει το φόντο των flex στοιχείων σε γαλαζοπράσινο χρώμα.
- ' w-20 Η κλάση ορίζει το πλάτος κάθε ευέλικτου στοιχείου σε 20 μονάδες.
- ' σ-5 Η κλάση προσθέτει 5 μονάδες επένδυσης σε όλες τις πλευρές κάθε ευέλικτου αντικειμένου.
- ' σύνορο-2 Η κλάση θέτει το πλάτος περιγράμματος του κοντέινερ σε 2 μονάδες.
- ' border-teal-800 Η τάξη εφαρμόζει γαλαζοπράσινο χρώμα στο περίγραμμα.
Παραγωγή
Η παραπάνω έξοδος δείχνει ότι τα εύκαμπτα στοιχεία επικαλύπτονται. Αυτό υποδηλώνει ότι η τιμή αρνητικού οριζόντιου διαστήματος εφαρμόστηκε με επιτυχία.
Παράδειγμα 2: Εφαρμόστε μια αρνητική κάθετη απόσταση μεταξύ των στοιχείων
Σε αυτό το παράδειγμα, έχουμε ένα εύκαμπτο κοντέινερ με μερικά θυγατρικά στοιχεία σε μια στήλη. Θα χρησιμοποιήσουμε το « -space-y-7 Κατηγορία για εφαρμογή της αρνητικής κατακόρυφης απόστασης μεταξύ εύκαμπτων στοιχείων:
< σώμα >< div τάξη = 'flex flex-col -space-y-7 m-10 text-center' >
< div τάξη = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div τάξη = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div τάξη = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div τάξη = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
σώμα >
Εδώ:
-
- ' καλώδιο ” Η τάξη δημιουργεί μια ευέλικτη διάταξη.
- ' flex-col Η κλάση ευθυγραμμίζει τα ευέλικτα στοιχεία σε κάθετη κατεύθυνση.
- ' -space-y-5 Η κλάση προσθέτει 7 μονάδες αρνητικής κατακόρυφης απόστασης μεταξύ εύκαμπτων στοιχείων μέσα σε ένα δοχείο.
- ' m-10 Η κλάση προσθέτει ένα περιθώριο 10 μονάδων σε όλες τις πλευρές του δοχείου.
- ' κείμενο-κέντρο ” η τάξη ευθυγραμμίζει το κείμενο του κοντέινερ στο κέντρο.
Παραγωγή
Μπορεί να φανεί ότι τα εύκαμπτα στοιχεία επικαλύπτονται. Αυτό υποδηλώνει ότι η τιμή του αρνητικού κατακόρυφου διαστήματος εφαρμόστηκε με επιτυχία.
συμπέρασμα
Για να χρησιμοποιήσετε μια αρνητική τιμή διαστήματος στο Tailwind, χρησιμοποιήστε το ' -space-x-<τιμή> ' και ' -space-y-<τιμή> ” βοηθητικά προγράμματα με το επιθυμητό κοντέινερ flex ή grid στη δομή HTML. Αυτά τα βοηθητικά προγράμματα χρησιμοποιούνται συχνά για την τοποθέτηση ενός στοιχείου μέσα σε ένα άλλο στοιχείο. Αυτός ο οδηγός επεξηγεί τη μέθοδο χρήσης μιας αρνητικής τιμής διαστήματος στο Tailwind.