تشرح هذه المقالة طريقة منع التفاف العناصر المرنة في Tailwind CSS.
كيفية منع / إيقاف العناصر المرنة من الالتفاف في الريح الخلفية؟
لمنع التفاف العناصر المرنة في Tailwind ، أنشئ ملف HTML. بعد ذلك ، استخدم الأداة المساعدة 'flex-nowrap' مع الحاوية المرنة في برنامج HTML لمنع التفاف العناصر المرنة. بعد ذلك ، تأكد من التغييرات من خلال عرض صفحة ويب HTML.
جرب الخطوات المذكورة أدناه لفهمها بشكل أفضل:
الخطوة 1: منع العناصر المرنة من الالتفاف في برنامج HTML
أنشئ برنامج HTML واستخدم ' فليكس نراب 'مع الحاوية المرنة المرغوبة لمنع التفاف العناصر المرنة:
< جسم >
< شعبة فصل = 'فليكس فليكس ناراب h-40' >
< شعبة فصل = 'أساس -1 / 4 bg-red-500 m-1' > 1 < / شعبة >
< شعبة فصل = 'أساس -1 / 3 Bg-Yellow-500 m-1' > 2 < / شعبة >
< شعبة فصل = 'أساس -1 / 2 bg-teal-500 m-1' > 3 < / شعبة >
< / شعبة >
< / جسم >
هنا:
- ' ثني 'فئة تتيح تخطيط فليكس بوكس على عنصر ويسمح بترتيب العناصر الفرعية ومواءمتها.
- ' فليكس نراب 'class تحدد أن العناصر المرنة يجب ألا تلتف على أسطر متعددة وأن تحافظ على جميع العناصر المرنة في سطر واحد.
- ال ' أساس -1 / 4 '،' أساس -1 / 3 '، و ' أساس -1 / 2 'تعيين الطبقات الداخلية
عرض إلى 25٪ و 33.33٪ و 50٪ من العناصر الأصلية ، على التوالي.
الخطوة 2: تحقق من الإخراج
للتأكد من عدم التفاف العناصر المرنة ، قم بعرض صفحة ويب HTML:
في صفحة الويب أعلاه ، تكون العناصر المرنة في سطر واحد ولم يتم تغليفها.
خاتمة
لمنع التفاف العناصر المرنة في Tailwind ، استخدم الأداة المساعدة 'flex-nowrap' مع الحاوية المرنة المطلوبة في برنامج HTML. هذه الأداة تمنع التفاف العناصر المرنة. للتحقق ، اعرض التغييرات على صفحة الويب. توضح هذه المقالة طريقة منع التفاف العناصر المرنة في Tailwind CSS.