توضح هذه المقالة طريقة طلب العناصر المرنة والشبكة في Tailwind CSS.
كيفية طلب العناصر المرنة والشبكة في Tailwind؟
لطلب العناصر المرنة والشبكة في Tailwind CSS ، أنشئ ملف HTML. بعد ذلك ، استخدم الأداة المساعدة 'order-' وحدد قيمة الطلب في برنامج HTML لتغيير ترتيب العناصر المرنة والشبكة. يسمح بعرض العناصر المرنة بترتيب مختلف عما يتم عرضه في DOM (نموذج كائن المستند). لضمان التغييرات ، قم بعرض صفحة ويب HTML.
انظر إلى الخطوات المقدمة لفهم أفضل:
الخطوة 1: اطلب العناصر المرنة والشبكة في برنامج HTML
أنشئ برنامج HTML واستخدم ' ترتيب- <قيمة> 'وتحديد قيمة الأمر لعناصر الشبكة أو العناصر المرنة. على سبيل المثال ، استخدمنا الأدوات المساعدة 'order-3' و 'order-last' و 'order-first' و 'order-2'.
< جسم >
< شعبة فصل = 'فليكس h-20' >
< شعبة فصل = 'Order-3 bg-red-500 w-32 m-1' > 1 < / شعبة >
< شعبة فصل = 'Order-last bg-yellow-500 w-32 m-1' > 2 < / شعبة >
< شعبة فصل = 'Order-first bg-teal-500 w-32 m-1' > 3 < / شعبة >
< شعبة فصل = 'Order-2 Bg-orange-500 W-32 m-1' > 4 < / شعبة >
< / شعبة >
< / جسم >
هنا:
- ' الطلب 3 تحدد الفئة ترتيب العنصر إلى 3 وسيتم وضع العنصر المرن كعنصر ثالث داخل الحاوية المرنة.
- ' ترتيب الماضي 'تحدد فئة ترتيب العنصر ليكون الأخير وسيكون العنصر الأخير داخل الحاوية المرنة.
- ' الترتيب أولا تحدد فئة 'ترتيب العنصر ليكون الأول وسيتم وضعه كأول عنصر داخل الحاوية المرنة.
- ' الطلب 2 تحدد الفئة ترتيب العنصر على 2 وسيتم وضعه كعنصر ثانٍ داخل الحاوية المرنة.
- ' ث -32 تطبق فئة 32 وحدة عرض لكل عنصر مرن.
- ' م -1 'فئة تضيف هامش وحدة واحد حول كل عنصر مرن.
الخطوة 2: تحقق من الإخراج
اعرض صفحة الويب بتنسيق HTML للتأكد من أن العناصر المرنة والشبكة قد تم ترتيبها:
يمكن ملاحظة أنه تم طلب العناصر المرنة والشبكة بنجاح وفقًا لذلك تم تحديدها.
خاتمة
لطلب العناصر المرنة والشبكة في Tailwind CSS ، استخدم ' النظام- <القيمة> ”وتحديد قيمة الطلب لعناصر المرن والشبكة في برنامج HTML. يقوم بإعادة ترتيب العناصر المرنة والشبكة على صفحة الويب. للتحقق ، اعرض التغييرات على صفحة ويب HTML وتأكد من التغييرات. توضح هذه المقالة طريقة طلب العناصر المرنة والشبكة في Tailwind CSS.