Πώς να προσθέσετε οριζόντιο και κάθετο χώρο μεταξύ στοιχείων στο Tailwind;

Pos Na Prosthesete Orizontio Kai Katheto Choro Metaxy Stoicheion Sto Tailwind



Το Tailwind CSS παρέχει το ' διάστημα μεταξύ ” βοηθητικά προγράμματα για τον έλεγχο του χώρου μεταξύ των στοιχείων flex ή grid container. Έχει διάφορες κλάσεις, όπως “space-x-”, “space-y-”, “space-x-reverse”, “space-y-reverse” κ.λπ. Αυτά τα βοηθητικά προγράμματα προσθέτουν οριζόντια και κατακόρυφο διάστημα μεταξύ εύκαμπτων ή πλέγμα στοιχείων στο δοχείο.

Οριζόντιος χώρος είναι ένας χώρος κατά μήκος του άξονα x μεταξύ των θυγατρικών στοιχείων ενός εύκαμπτου ή πλέγματος κοντέινερ όταν είναι διατεταγμένα σε μια σειρά. Κάθετος χώρος είναι ένας χώρος κατά μήκος του άξονα y μεταξύ των θυγατρικών στοιχείων ενός εύκαμπτου ή πλέγματος κοντέινερ όταν είναι διατεταγμένα σε μια στήλη.

Αυτό το άρθρο θα δείξει:





Πώς να προσθέσετε οριζόντιο χώρο μεταξύ στοιχείων στο Tailwind;

Για να προσθέσετε οριζόντιο χώρο μεταξύ των στοιχείων στο Tailwind, το ' space-x-<τιμή> Η κλάση χρησιμοποιείται με το επιθυμητό στοιχείο στο πρόγραμμα HTML. Αυτή η κλάση προσθέτει χώρο μεταξύ στοιχείων κατά μήκος του άξονα x.



Σύνταξη



<στοιχείο τάξη = 'space-x- ...'>... < / στοιχείο>

Εδώ, το 'x' αντιπροσωπεύει τον 'άξονα x' ή τον 'οριζόντιο χώρο'. Φροντίστε να αντικαταστήσετε το '<τιμή>' με οποιαδήποτε έγκυρη τιμή, όπως '4', '10' κ.λπ.



Παράδειγμα: Εφαρμογή οριζόντιου χώρου μεταξύ στοιχείων στον ουραίο άνεμο

Σε αυτό το παράδειγμα, έχουμε ένα εύκαμπτο κοντέινερ με ορισμένα θυγατρικά στοιχεία. Θα χρησιμοποιήσουμε το « space-x-8 ' τάξη χρησιμότητας με το '

' στοιχείο για την προσθήκη οριζόντιου χώρου μεταξύ των θυγατρικών στοιχείων του:



< σώμα >

< div τάξη = 'flex space-x-8 m-10 h-20 w-max' >

< div τάξη = 'bg-teal-500 w-20 p-5' > 1 < / div >
< div τάξη = 'bg-teal-500 w-20 p-5' > 2 < / div >
< div τάξη = 'bg-teal-500 w-20 p-5' > 3 < / div >
< div τάξη = 'bg-teal-500 w-20 p-5' > 4 < / div >
< div τάξη = 'bg-teal-500 w-20 p-5' > 5 < / div >
< div τάξη = 'bg-teal-500 w-20 p-5' > 6 < / div >

< / div >

< / σώμα >

Εδώ, στο γονικό στοιχείο

:

  • ' καλώδιο ” Η τάξη δημιουργεί μια ευέλικτη διάταξη.
  • ' space-x-8 Η κλάση προσθέτει 8 μονάδες οριζόντιας απόστασης μεταξύ εύκαμπτων στοιχείων μέσα σε ένα δοχείο.
  • ' m-10 Η κλάση προσθέτει ένα περιθώριο 10 μονάδων σε όλες τις πλευρές του δοχείου.
  • ' h-20 Η κλάση ορίζει το ύψος του δοχείου σε 20 μονάδες.
  • ' w-max Η κλάση θέτει το πλάτος του κοντέινερ στο μέγιστο πλάτος περιεχομένου.

Στα στοιχεία του παιδιού

:

  • ' bg-teal-500 Η τάξη θέτει το φόντο των flex στοιχείων σε γαλαζοπράσινο χρώμα.
  • ' w-20 Η κλάση ορίζει το πλάτος κάθε ευέλικτου στοιχείου σε 20 μονάδες.
  • ' σ-5 Η κλάση προσθέτει 5 μονάδες επένδυσης σε όλες τις πλευρές κάθε ευέλικτου αντικειμένου.

Παραγωγή

Η παραπάνω έξοδος δείχνει ότι ο οριζόντιος χώρος μεταξύ του στοιχείου flex έχει εφαρμοστεί με επιτυχία.

Πώς να προσθέσετε κάθετο χώρο μεταξύ στοιχείων στο Tailwind;

Για να προσθέσετε κάθετο χώρο μεταξύ των στοιχείων στο Tailwind, το ' space-y-<τιμή> Η κλάση χρησιμοποιείται με το συγκεκριμένο στοιχείο στο πρόγραμμα HTML. Αυτή η κλάση προσθέτει χώρο μεταξύ στοιχείων κατά μήκος του άξονα y.

Σύνταξη

<στοιχείο τάξη = 'space-y- ...' >...< / στοιχείο>

Εδώ, το 'y' αντιπροσωπεύει τον 'άξονα y' ή τον 'κάθετο χώρο'. Φροντίστε να αντικαταστήσετε το '<τιμή>' με οποιαδήποτε πραγματική τιμή, όπως '5', '12' κ.λπ.

Παράδειγμα: Εφαρμογή κατακόρυφου διαστήματος μεταξύ στοιχείων στον ουραίο άνεμο

Σε αυτό το παράδειγμα, έχουμε ένα εύκαμπτο κοντέινερ με μερικά θυγατρικά στοιχεία σε μια στήλη. Θα χρησιμοποιήσουμε το « διάστημα-υ-5 ' τάξη χρησιμότητας με το '

' στοιχείο για να προσθέσετε κάθετο χώρο μεταξύ των θυγατρικών στοιχείων του:

< σώμα >

< div τάξη = 'flex flex-col space-y-5 m-10 text-center' >
< div τάξη = 'bg-teal-500 p-5' > 1 < / div >
< div τάξη = 'bg-teal-500 p-5' > 2 < / div >
< div τάξη = 'bg-teal-500 p-5' > 3 < / div >
< div τάξη = 'bg-teal-500 p-5' > 4 < / div >
< / div >

< / σώμα >

Εδώ:

  • ' καλώδιο ” Η τάξη δημιουργεί μια ευέλικτη διάταξη.
  • ' flex-col Η κλάση ευθυγραμμίζει τα ευέλικτα στοιχεία σε κατακόρυφη κατεύθυνση (σε στήλη).
  • ' διάστημα-υ-5 Η κλάση προσθέτει 5 μονάδες κάθετης απόστασης μεταξύ εύκαμπτων στοιχείων μέσα σε ένα δοχείο.
  • ' m-10 Η κλάση προσθέτει ένα περιθώριο 10 μονάδων σε όλες τις πλευρές του δοχείου.
  • ' κείμενο-κέντρο ” η τάξη ευθυγραμμίζει το κείμενο του κοντέινερ στο κέντρο.

Παραγωγή

Ο κατακόρυφος χώρος μεταξύ των εύκαμπτων στοιχείων έχει εφαρμοστεί αποτελεσματικά.

συμπέρασμα

Για να προσθέσετε τον οριζόντιο και τον κατακόρυφο χώρο μεταξύ των στοιχείων στο Tailwind, το ' space-x-<τιμή> ' και ' space-y-<τιμή> Οι κλάσεις βοηθητικών προγραμμάτων χρησιμοποιούνται με τα επιθυμητά στοιχεία στο πρόγραμμα HTML αντίστοιχα. Αυτές οι κατηγορίες χρησιμοποιούνται συνήθως με εύκαμπτα και πλέγματα δοχεία για τον έλεγχο του χώρου μεταξύ των θυγατρικών τους στοιχείων. Αυτό το άρθρο έχει ως παράδειγμα τη μέθοδο εφαρμογής οριζόντιου και κάθετου χώρου μεταξύ στοιχείων στο Tailwind.

Αλλα

Κατηγορία

Δημοφιλείς Αναρτήσεις

Πώς να εγκαταστήσετε το RubyGems στο Debian

Ποια είναι η διαφορά μεταξύ του AWS SSO και του Cognito;

Πώς να χρησιμοποιήσετε το Hover, το Focus και άλλες καταστάσεις με την ιδιότητα Position στο Tailwind;

Το τρίγωνο του Πασκάλ σε C++

Τι είναι το Logstash και πώς να το ρυθμίσετε με το Elasticsearch;

Πώς να ρυθμίσετε το Port Forward με το Iptables σε συστήματα που βασίζονται σε Linux

Πώς να αποθέσετε μια στήλη από τον πίνακα SQLite

Το Windows Defender δεν ξεκινά στα Windows 10 [ΔΙΟΡΘΩΘΗΚΕ]

Εκκαθαρίστε το DataFrame στο Pandas

Εντολή Cppcheck στο Linux

Τρόπος χρήσης Java Enums σε δηλώσεις Switch

Πώς να χρησιμοποιήσετε την εντολή awk στο Bash

Πώς να επαναφέρετε το PIN στο Roblox

Αναζήτηση πλέγματος με MLflow

Εγγράψτε την οθόνη επιφάνειας εργασίας στο Raspberry Pi χρησιμοποιώντας το πρόγραμμα αναπαραγωγής πολυμέσων VLC

Oracle LIKE

Πώς να χρησιμοποιήσετε το Parent Document Retriever στο LangChain;

Πώς να εμφανίσετε την ημερομηνία ώρας σε μορφή 12 ωρών π.μ./μ.μ. σε JavaScript;

Τα Panda Μετατρέπουν τις Κατηγορικές Τιμές σε Τιμές Int

Τι είναι τα List-Crawlers στο AWS;