Πώς να εφαρμόσετε σημεία διακοπής και ερωτήματα πολυμέσων με 'justify-content' στο Tailwind;

' στοιχείο για αλλαγή της οριζόντιας στοίχισης των αντικειμένων του σε μεσαίο και μεγάλο μέγεθος οθόνης:

< σώμα >

< div τάξη = 'flex justify-start md:justify-between lg:justify-end gap-3 m-3 bg-teal-700' >
< div τάξη = 'bg-yellow-400 w-24 h-12' > 1 < / div >
< div τάξη = 'bg-yellow-400 w-24 h-12' > 2 < / div >
< div τάξη = 'bg-yellow-400 w-24 h-12' > 3 < / div >

< / div >

< / σώμα >

Εδώ:

• «Αιτιολόγησε-ξεκίνα» Η κλάση ευθυγραμμίζει τα ευέλικτα στοιχεία στην αρχή του κύριου άξονα του κοντέινερ.
• 'md:justify-between' Η class κατανέμει τα flex αντικείμενα κατά μήκος του κύριου άξονα του κοντέινερ με ίση απόσταση μεταξύ τους σε μεσαίο μέγεθος οθόνης.
• “lg:justify-end” Η κλάση ευθυγραμμίζει τα ευέλικτα στοιχεία στο τέλος του κύριου άξονα του κοντέινερ σε ένα μεγάλο μέγεθος οθόνης.

Παραγωγή

---

---

Η παραπάνω έξοδος δείχνει ότι η οριζόντια ευθυγράμμιση των ευέλικτων στοιχείων αλλάζει καθώς το μέγεθος της οθόνης ποικίλλει. Αυτό υποδηλώνει ότι τα καθορισμένα σημεία διακοπής και τα ερωτήματα πολυμέσων έχουν εφαρμοστεί αποτελεσματικά με το βοηθητικό πρόγραμμα 'justify-content'.

συμπέρασμα

Για την εφαρμογή σημείων διακοπής και ερωτημάτων μέσων με βοηθητικά προγράμματα 'justify-content' στο Tailwind, ορίστε την επιθυμητή τιμή στο 'justify-' βοηθητικό πρόγραμμα για διάφορα μεγέθη οθόνης χρησιμοποιώντας το ' md ' ή ' lg ' ορια ΑΝΤΟΧΗΣ. Για επαλήθευση, αλλάξτε το μέγεθος οθόνης της ιστοσελίδας και διασφαλίστε τις αλλαγές. Αυτό το άρθρο παρουσίασε το παράδειγμα για την εφαρμογή επιθυμητών σημείων διακοπής και ερωτημάτων πολυμέσων στα βοηθητικά προγράμματα 'justify-content' στο Tailwind.