Αυτό το ιστολόγιο θα παρέχει μια ιδέα για την εκχώρηση ίσου χώρου μεταξύ πολλών στοιχείων στο Tailwind.
Πώς να εκχωρήσετε ίσο χώρο μεταξύ πολλαπλών στοιχείων στο Tailwind;
Οι χρήστες μπορούν να αντιστοιχίσουν ίσα κενά μεταξύ των στοιχείων χρησιμοποιώντας το ' space-{x/y}-{size} ” τάξη χρησιμότητας. Οι χρήστες μπορούν να προσθέσουν χώρο στον άξονα x ή y καθορίζοντας μια ακέραια τιμή. Το βοηθητικό πρόγραμμα Spacing είναι απαραίτητο γιατί κάνει την ιστοσελίδα ελκυστική. Εάν μια ιστοσελίδα δεν έχει σωστή απόσταση μεταξύ των στοιχείων, δεν θα προσελκύσει χρήστες.
Ας πάρουμε ένα παράδειγμα κώδικα για να εκχωρήσουμε ίσο χώρο μεταξύ των στοιχείων του πλέγματος.
Μέθοδος 1: Εκχώρηση χώρου στον άξονα Χ.
Ο ίσος χώρος που έχει εκχωρηθεί στον άξονα x κάνει ίσες αποστάσεις δεξιά και αριστερά του στοιχείου. Για να εκχωρήσετε το διάστημα στον άξονα x χρησιμοποιήστε την ακόλουθη σύνταξη:
χώρος - Χ - { Μέγεθος }
Το μέγεθος μπορεί να είναι οποιαδήποτε ακέραια τιμή.
Εξετάστε τον παρακάτω κωδικό για να ορίσετε ίσο χώρο στον άξονα x:
< σώμα >< div τάξη = 'mx-4 grid grid-cols-4 space-x-4' >
< div τάξη = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div τάξη = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div τάξη = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div τάξη = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
σώμα >
Σε αυτόν τον κώδικα:
- ' mx-4 ” προσθέτει ένα περιθώριο 4 px στον άξονα x (δεξιά και αριστερά).
- Ο ' πλέγμα ” η τάξη δημιουργεί ένα πλέγμα.
- Ο ' grid-cols-4 ” κάντε 4 στήλες στο πλέγμα.
- Ο ' space-x-4 ” προσθέτει ένα διάστημα 4 εικονοστοιχείων μεταξύ των στοιχείων του πλέγματος.
- ' bg-green-400 ” ορίζει το χρώμα φόντου σε πράσινο.
- ' h-16 ” ορίζει το ύψος στα 16 px.
- Ο ' στρογγυλεμένο-lg ” κάνει τη γωνία στρογγυλή και η ακτίνα του περιγράμματος είναι μεγάλη.
- Ο ' σύνορο-2 ” κάνει ένα περίγραμμα 2 px γύρω από το στοιχείο.
- ' σύνορα-πράσινο-800 ” κάνει το περίγραμμα σκούρο πράσινο.
Παραγωγή
Κάντε προεπισκόπηση της εξόδου που δημιουργήθηκε από τον παραπάνω κώδικα:
Μπορεί να φανεί ότι έχει εκχωρηθεί απόσταση 4 εικονοστοιχείων μεταξύ των στοιχείων.
Μέθοδος 2: Εκχώρηση χώρου στον άξονα y.
Η απόσταση μπορεί να εκχωρηθεί στον άξονα y παρόμοια με την παραπάνω μέθοδο, με μικρές αλλαγές στον παραπάνω κώδικα. Εκχωρεί χώρους κατά μήκος του άξονα y (πάνω και κάτω). Η σύνταξη για αυτό είναι:
Ο παρακάτω κώδικας μπορεί να εφαρμοστεί για την προσθήκη διαστημάτων κατά μήκος του άξονα y:
< σώμα >< div τάξη = 'mx-4 my-4 space-y-4' >
< div τάξη = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div τάξη = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div τάξη = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div τάξη = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
σώμα >
Σε αυτόν τον κώδικα:
- ' mx-4 ” προσθέτει ένα περιθώριο 4 εικονοστοιχείων στα αριστερά και δεξιά των στοιχείων για να κάνει την έξοδο πιο βελτιστοποιημένη.
- ' my-4 ” προσθέτει ένα περιθώριο 4 εικονοστοιχείων στον άξονα y (πάνω και κάτω).
- ' διάστημα-υ-4 ” προσθέτει χώρο 4 εικονοστοιχείων στον άξονα y (πάνω και κάτω).
Παραγωγή
Αποθηκεύστε τον παραπάνω κώδικα και κάντε προεπισκόπηση της ιστοσελίδας που δημιουργήθηκε από αυτόν για να δείτε το διάστημα ως:
Αυτό έχει να κάνει με την εκχώρηση ίσου χώρου μεταξύ των στοιχείων.
συμπέρασμα
Για να εκχωρήσετε ίσο χώρο μεταξύ πολλών στοιχείων στο Tailwind, οι χρήστες μπορούν να χρησιμοποιήσουν το ' space-{x/y}-{size} ” κλάση χρησιμότητας και καθορίστε μια ακέραια τιμή ως μέγεθος σύμφωνα με την απαίτηση. Η ίση απόσταση μεταξύ των στοιχείων κάνει το αποτέλεσμα πιο κλιμακωτό και οι θεατές παραμένουν αφοσιωμένοι στην ιστοσελίδα. Αυτή η ανάρτηση παρέχει τη μέθοδο για την εκχώρηση ίσου χώρου μεταξύ πολλών στοιχείων στο Tailwind.