كيفية تطبيق Breakpoints و Media Queries باستخدام 'justify-content' في Tailwind؟

” عنصر لتغيير المحاذاة الأفقية لعناصره على حجم الشاشة المتوسط ​​والكبير:

< جسم >

< شعبة فصل = 'flex justify-start md: justify-between lg: justify-end gap-3 m-3 bg-teal-700' >
< شعبة فصل = 'bg-yellow-400 w-24 h-12' > 1 < / شعبة >
< شعبة فصل = 'bg-yellow-400 w-24 h-12' > 2 < / شعبة >
< شعبة فصل = 'bg-yellow-400 w-24 h-12' > 3 < / شعبة >

< / شعبة >

< / جسم >

هنا:

• 'تبرير البدء' يقوم class بمحاذاة العناصر المرنة في بداية المحور الرئيسي للحاوية.
• 'md: تبرير بين' يوزع class العناصر المرنة على طول المحور الرئيسي للحاوية مع مسافات متساوية بينها على حجم شاشة متوسط.
• 'lg: تبرير النهاية' class تحاذي العناصر المرنة في نهاية المحور الرئيسي للحاوية على حجم شاشة كبير.

انتاج |

---

---

يوضح الإخراج أعلاه أن المحاذاة الأفقية للعناصر المرنة تتغير مع اختلاف حجم الشاشة. يشير هذا إلى أن نقاط التوقف المحددة واستعلامات الوسائط قد تم تطبيقها بشكل فعال باستخدام الأداة المساعدة 'justify-content'.

خاتمة

لتطبيق نقاط الفصل واستعلامات الوسائط باستخدام أدوات 'justify-content' المساعدة في Tailwind ، حدد القيمة المطلوبة لـ 'تبرير- <قيمة>' لأحجام الشاشات المختلفة من خلال استخدام ' م ' أو ' إل جي 'نقاط التوقف. للتحقق ، قم بتغيير حجم شاشة صفحة الويب وتأكد من التغييرات. لقد أوضحت هذه المقالة مثالاً لتطبيق نقاط التوقف المطلوبة واستعلامات الوسائط على الأدوات المساعدة 'justify-content' في Tailwind.