في Tailwind CSS، ' الفضاء بين تُستخدم الأدوات المساعدة للتحكم في المسافة بين العناصر الفرعية للحاويات المرنة أو الشبكية. وهو يقدم فئات مختلفة، مثل 'space-x-
سيوضح هذا الدليل طريقة استخدام قيمة مسافة سالبة في Tailwind.
كيفية استخدام قيمة مسافة سلبية في Tailwind؟
لاستخدام قيمة مسافة سالبة في Tailwind، عليك أولاً إنشاء بنية HTML. ثم استخدم الشرطة ' - ' مع فئات الأداة المساعدة 'المسافة بين' المطلوبة لتحويلها إلى قيمة سالبة. ال ' -مسافة-x-<القيمة> ' و ' -مسافة-y-<القيمة> تُستخدم الأدوات المساعدة غالبًا لوضع عنصر واحد داخل عنصر آخر.
دعنا نستعرض الأمثلة أدناه لفهمها بشكل أفضل.
مثال 1: تطبيق تباعد أفقي سلبي بين العناصر
في هذا المثال، لدينا حاوية مرنة تحتوي على بعض العناصر الفرعية في صف واحد. سوف نستخدم ' -مساحة-x-8 'فئة لتطبيق التباعد الأفقي السلبي بين العناصر المرنة:
< جسم >< شعبة فصل = 'فليكس -مسافة-x-8 م-10 ح-20 ث-ماكس' >
< شعبة فصل = 'bg-teal-500 w-20 p-5 الحدود-2 الحدود-البط البري-800' > 1 شعبة >
< شعبة فصل = 'bg-teal-500 w-20 p-5 الحدود-2 الحدود-البط البري-800' > 2 شعبة >
< شعبة فصل = 'bg-teal-500 w-20 p-5 الحدود-2 الحدود-البط البري-800' > 3 شعبة >
< شعبة فصل = 'bg-teal-500 w-20 p-5 الحدود-2 الحدود-البط البري-800' > 4 شعبة >
< شعبة فصل = 'bg-teal-500 w-20 p-5 الحدود-2 الحدود-البط البري-800' > 5 شعبة >
< شعبة فصل = 'bg-teal-500 w-20 p-5 الحدود-2 الحدود-البط البري-800' > 6 شعبة >
شعبة >
جسم >
هنا، في عنصر الوالدين
-
- ' ثني 'تنشئ الفئة تخطيطًا مرنًا.
- ' -مساحة-x-8 تضيف فئة '8 وحدات من التباعد الأفقي السلبي بين العناصر المرنة داخل الحاوية.
- ' م-10 تضيف الفئة هامشًا قدره 10 وحدات إلى جميع جوانب الحاوية.
- ' ح-20 'فئة تحدد ارتفاع الحاوية إلى 20 وحدة.
- ' ث-ماكس 'تحدد الفئة عرض الحاوية إلى الحد الأقصى لعرض المحتوى الخاص بها.
في عناصر
-
- ' بي جي-تيل-500 'فئة تحدد خلفية العناصر المرنة باللون الأزرق المخضر.
- ' ث-20 'تحدد الفئة عرض كل عنصر مرن بـ 20 وحدة.
- ' ص-5 تضيف الفئة 5 وحدات من الحشو إلى جميع جوانب كل عنصر مرن.
- ' الحدود-2 'فئة تحدد عرض حدود الحاوية على وحدتين.
- ' الحدود-البط البري-800 'يطبق الفصل اللون الأزرق المخضر على الحدود.
انتاج |
يوضح الإخراج أعلاه أن العناصر المرنة متداخلة. يشير هذا إلى أنه تم تطبيق قيمة المسافة الأفقية السالبة بنجاح.
مثال 2: تطبيق تباعد عمودي سلبي بين العناصر
في هذا المثال، لدينا حاوية مرنة تحتوي على بعض العناصر الفرعية في عمود. سوف نستخدم ' -مساحة-y-7 'فئة لتطبيق التباعد الرأسي السلبي بين العناصر المرنة:
< جسم >< شعبة فصل = 'فليكس فليكس كول -مسافة-y-7 m-10 مركز النص' >
< شعبة فصل = 'bg-teal-500 p-5 حدود-2 حدود-teal-800' > 1 شعبة >
< شعبة فصل = 'bg-teal-500 p-5 حدود-2 حدود-teal-800' > 2 شعبة >
< شعبة فصل = 'bg-teal-500 p-5 حدود-2 حدود-teal-800' > 3 شعبة >
< شعبة فصل = 'bg-teal-500 p-5 حدود-2 حدود-teal-800' > 4 شعبة >
شعبة >
جسم >
هنا:
-
- ' ثني 'تنشئ الفئة تخطيطًا مرنًا.
- ' فليكس كول 'تقوم الفئة بمحاذاة العناصر المرنة في الاتجاه الرأسي.
- ' -مساحة-y-5 تضيف فئة '7 وحدات من التباعد الرأسي السلبي بين العناصر المرنة داخل الحاوية.
- ' م-10 تضيف الفئة هامشًا قدره 10 وحدات إلى جميع جوانب الحاوية.
- ' مركز النص 'تقوم الفئة بمحاذاة نص الحاوية إلى المركز.
انتاج |
يمكن ملاحظة أن العناصر المرنة متداخلة. يشير هذا إلى أنه تم تطبيق قيمة المسافة العمودية السالبة بنجاح.
خاتمة
لاستخدام قيمة مسافة سالبة في Tailwind، استخدم الزر ' -مسافة-x-<القيمة> ' و ' -مسافة-y-<القيمة> 'أدوات مساعدة مع الحاوية المرنة أو الشبكة المطلوبة في بنية HTML. غالبًا ما تُستخدم هذه الأدوات المساعدة لوضع عنصر واحد داخل عنصر آخر. يوضح هذا الدليل طريقة استخدام قيمة مسافة سالبة في Tailwind.