تقدم Tailwind CSS العديد من ' محاذاة العناصر 'أدوات للتحكم في موضع العناصر المرنة والشبكة على طول المحور المتقاطع للحاوية. تتضمن فئات الأدوات المساعدة 'بدء العناصر' و 'مركز العناصر' و 'نهاية العناصر' و 'العناصر الأساسية' و 'امتداد العناصر'. علاوة على ذلك ، يمكن للمستخدمين أيضًا استخدام نقاط التوقف واستعلامات الوسائط على الأداة المساعدة 'items-
ستوضح هذه المقالة طريقة تطبيق نقاط التوقف واستعلامات الوسائط على الأدوات المساعدة 'محاذاة العناصر' في Tailwind.
كيفية تطبيق نقاط الفصل واستعلامات الوسائط باستخدام 'محاذاة العناصر' في Tailwind؟
لتطبيق نقاط الفصل المطلوبة واستعلامات الوسائط على الأدوات المساعدة 'justify-content' في Tailwind ، أنشئ بنية HTML. بعد ذلك ، حدد القيمة المحددة لـ ' العناصر- <القيمة> 'لأحجام الشاشات المختلفة باستخدام' م ' أو ' إل جي 'نقاط التوقف. أخيرًا ، قم بتغيير حجم شاشة صفحة الويب للتحقق.
مثال
في هذا المثال ، سننشئ حاوية مرنة مع خاصية 'بدء العناصر'. سوف نستخدم ' م 'نقطة فاصلة مع' مركز العناصر 'فائدة و' إل جي 'نقطة فاصلة مع' نهاية العناصر 'في' انتاج | لتطبيق نقاط الفصل واستعلامات الوسائط مع أدوات 'محاذاة العناصر' في Tailwind ، حدد القيمة المطلوبة لـ ' العناصر- <القيمة> 'لمختلف أحجام الشاشات من خلال استخدام' م ' أو ' إل جي 'نقاط التوقف. للتحقق ، قم بتغيير حجم شاشة صفحة الويب وتأكد من التغييرات. توضح هذه المقالة المثال لتطبيق نقاط توقف واستعلامات وسائط معينة على أدوات 'محاذاة العناصر' في Tailwind.
< جسم >
< شعبة فصل = 'العناصر المرنة-البدء md: العناصر-المنتصف lg: العناصر-نهاية الضبط حول النص-المركز h-44 m-3 bg-pink-300 الفجوة-4' >
< شعبة فصل = 'bg-pink-600 py-4 w-40' > 1 شعبة >
< شعبة فصل = 'bg-pink-600 py-12 w-40' > 2 شعبة >
< شعبة فصل = 'bg-pink-600 py-8 w-40' > 3 شعبة >
شعبة >
جسم >
هنا:
يوضح الإخراج أعلاه أن المحاذاة الرأسية للعناصر المرنة تتغير مع اختلاف حجم الشاشة. يشير هذا إلى أن نقاط التوقف المحددة واستعلامات الوسائط قد تم تطبيقها بشكل فعال باستخدام الأداة المساعدة 'محاذاة العناصر'. خاتمة