تشرح هذه المقالة طريقة تعيين الأساس المرن في Tailwind CSS.
كيفية ضبط Flex Basis في Tailwind؟
لتعيين الأساس المرن في Tailwind CSS ، أنشئ ملف HTML. ثم استخدم ' أساس- <الحجم> 'فئة الأداة المساعدة في برنامج HTML وتحديد حجم العنصر المرن. تحدد هذه الأداة الحجم الأولي للعناصر المرنة. للتأكد من التغييرات ، قم بعرض صفحة الويب.
انظر إلى الخطوات المقدمة للحصول على عرض عملي:
الخطوة 1: تعيين Flex Basis في برنامج HTML
أنشئ برنامج HTML واستخدم ' أساس- <الحجم> فئة الأداة المساعدة لتعيين حجم العنصر المرن. على سبيل المثال ، استخدمنا ' أساس -1 / 4 '،' أساس -1 / 3 '، و ' أساس -1 / 2 'لتعيين ثلاثة عناصر مرنة:
< جسم >
< شعبة فصل = 'فليكس h-20' >
< شعبة فصل = 'أساس -1 / 4 bg-red-400 m-1' > 1 < / شعبة >
< شعبة فصل = 'أساس -1 / 3 bg-teal-400 m-1' > 2 < / شعبة >
< شعبة فصل = 'أساس -1 / 2 bg-orange-400 m-1' > 3 < / شعبة >
< / شعبة >
< / جسم >
هنا:
- ' ثني 'يتم استخدام class لإنشاء تخطيط مرن وضبط أحجام العنصر الفرعي بناءً على المساحة المتاحة.
- ' ح -20 'فئة ارتفاع إلى 20 وحدة.
- ' أساس -1 / 4 'تعيّن class عرض عنصر
الداخلي على 25٪ من عنصره الأصلي.- ' أساس -1 / 3 تحدد فئة 'عرض
الداخلي إلى 33.33٪ من الحاوية الرئيسية الخاصة بها.- ' أساس -1 / 2 تحدد فئة عرض
's إلى 50٪ من الحاوية الرئيسية الخاصة بها.- ' bg-red-400 'فئة تطبيق لون خلفية أحمر على
.- ' bg-teal-400 'تعيين اللون الأزرق المخضر على خلفية
's.- ' بي جي-أورانج -400 'فئة تطبق لون الخلفية البرتقالي على
.- ' م -1 يضيف class هامشًا بمقدار وحدة واحدة حول كل عنصر من عناصر
.الخطوة 2: تحقق من الإخراج
للتأكد من أن الأساس المرن قد تم ضبطه ويعمل بشكل صحيح ، قم بعرض صفحة ويب HTML:
في الإخراج أعلاه ، يمكن رؤية الأساس المرن وفقًا لتصميمها.
خاتمة
يتيح الأساس المرن للمستخدمين إنشاء تخطيطات مرنة تتكيف مع أحجام ودرجات دقة الشاشة المختلفة. لتعيين الأساس المرن في Tailwind CSS ، فإن ' أساس- <الحجم> يتم استخدام فئة الأداة المساعدة 'في برنامج HTML. يحتاج المستخدمون إلى تحديد حجم العنصر المرن والتأكد من التغييرات من خلال عرض صفحة الويب. توضح هذه المقالة طريقة تعيين الأساس المرن في Tailwind CSS.
- ' أساس -1 / 4 'تعيّن class عرض عنصر