כיצד להחיל נקודות שבירה ושאילתות מדיה עם 'הצדקת תוכן' ב-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 >

< / גוּף >

כאן:

• 'להצדיק-להתחיל' class מיישר את פריטי ה-flex בתחילת הציר הראשי של המיכל.
• 'md:justify-between' class מפיצה את הפריטים הגמישים לאורך הציר הראשי של המכולה עם מרווח שווה ביניהם בגודל מסך בינוני.
• 'lg:justify-end' class מיישרת את הפריטים הגמישים בקצה הציר הראשי של המכולה בגודל מסך גדול.

תְפוּקָה

---

---

הפלט לעיל מראה שהיישור האופקי של הפריטים הגמישים משתנה ככל שגודל המסך משתנה. זה מצביע על כך שנקודות השבירה ושאילתות המדיה שצוינו יושמו ביעילות עם כלי השירות 'הצדק-תוכן'.

סיכום

להחלת נקודות שבירה ושאילתות מדיה עם כלי עזר 'הצדיק תוכן' ב-Tailwind, הגדר את הערך הרצוי ל- 'הצדיק-<ערך>' כלי עזר עבור גדלי מסך שונים על ידי שימוש ב' md ' או ' lg 'נקודות שבירה. לאימות, שנה את גודל המסך של דף האינטרנט והבטח שינויים. מאמר זה הדגים את הדוגמה להחלת נקודות עצירה ושאילתות מדיה רצויות על כלי השירות 'הצדיק תוכן' ב-Tailwind.