ستجسد عملية الكتابة هذه طريقة منع العناصر المرنة من النمو أو الانكماش في Tailwind CSS.
كيف تمنع العناصر المرنة من النمو أو الانكماش في الريح الخلفية؟
لمنع العناصر المرنة من النمو والتقلص في Tailwind ، أنشئ ملف HTML. ثم استخدم ' المرن النمو 0 ' و ' فليكس تقليص 0 ”مع العناصر المرنة المحددة في برنامج HTML. لا تسمح هذه الأدوات المساعدة للعناصر المرنة بالنمو أو الانكماش وفقًا للمساحة الموجودة داخل الحاوية المرنة. بعد ذلك ، اضبط حجم الشاشة لصفحة الويب بتنسيق HTML لضمان التغييرات.
اتبع الخطوات المقدمة لتنفيذه العملي:
الخطوة 1: منع العناصر المرنة من النمو والتقلص في برنامج HTML
أنشئ برنامج HTML واستخدم ' المرن النمو 0 ' و ' فليكس تقليص 0 'مع العناصر المرنة المرغوبة لمنعها من النمو أو الانكماش:
< جسم >
< شعبة فصل = 'فليكس h-20' >
< شعبة فصل = 'Flex-Grow-0 BG-Yellow-500 W-40 M-1' > 1 < / شعبة >
< شعبة فصل = 'فليكس-شرينك -0 BG-فوشيا-500 W-40 م -1' > 2 < / شعبة >
< شعبة فصل = 'Flex-Grow BG-Teal-500 W-40 M-1' > 3 < / شعبة >
< شعبة فصل = 'فليكس شرنك BG-Red-500 W-40 M-1' > 4 < / شعبة >
< / شعبة >
< / جسم >
هنا:
- ' المرن النمو 0 تمنع فئة العنصر المرن من النمو وتأخذ مساحة إضافية داخل الحاوية المرنة عند توفر مساحة.
- ' فليكس تقليص 0 'فئة تمنع العنصر المرن من الانكماش والتقلص داخل الحاوية المرنة عندما تكون المساحة غير كافية.
- ' ينمو المرن تسمح فئة العنصر المرن بالنمو واحتلال المساحة المتاحة داخل الحاوية المرنة.
- ' فليكس تقليص تسمح فئة العنصر المرن بالتقلص إذا لم تكن هناك مساحة كافية داخل الحاوية المرنة.
الخطوة 2: تحقق من الإخراج
اعرض صفحة الويب بتنسيق HTML وقم بتغيير حجم الشاشة لضمان منع العناصر المرنة المرغوبة من النمو والتقلص:
يوضح الناتج أعلاه أن العنصر المرن '2' لا يتقلص في مساحة غير كافية وأن العنصر '1' لا ينمو في المساحة المتاحة. يشير هذا إلى أنه تم منع العناصر المرنة المرغوبة من النمو والتقلص.
خاتمة
لمنع العناصر المرنة من النمو والتقلص في Tailwind ، استخدم ' المرن النمو 0 ' و ' فليكس تقليص 0 ”مع العناصر المرنة المطلوبة في برنامج HTML. للتحقق ، قم بتغيير وعرض حجم شاشة صفحة الويب بتنسيق HTML. تمثل هذه الكتابة مثالاً على طريقة منع العناصر المرنة من النمو أو الانكماش في Tailwind CSS.