یہ مضمون Tailwind CSS میں فلیکس اور گرڈ آئٹمز آرڈر کرنے کے طریقہ کی وضاحت کرے گا۔
ٹیل ونڈ میں فلیکس اور گرڈ آئٹمز کیسے آرڈر کریں؟
Tailwind CSS میں فلیکس اور گرڈ آئٹمز آرڈر کرنے کے لیے، ایک HTML فائل بنائیں۔ پھر، 'order-' یوٹیلیٹی کا استعمال کریں اور فلیکس اور گرڈ آئٹمز کی ترتیب کو تبدیل کرنے کے لیے HTML پروگرام میں آرڈر ویلیو کی وضاحت کریں۔ یہ فلیکس آئٹمز کو DOM (دستاویز آبجیکٹ ماڈل) میں ظاہر کرنے سے مختلف ترتیب میں پیش کرنے کی اجازت دیتا ہے۔ تبدیلیوں کو یقینی بنانے کے لیے، HTML ویب صفحہ دیکھیں۔
بہتر تفہیم کے لیے دیے گئے مراحل کو دیکھیں:
مرحلہ 1: ایچ ٹی ایم ایل پروگرام میں فلیکس اور گرڈ آئٹمز کا آرڈر دیں۔
ایک HTML پروگرام بنائیں اور استعمال کریں ' آرڈر -
< جسم >
< div کلاس = 'فلیکس ایچ -20' >
< div کلاس = 'آرڈر-3 bg-red-500 w-32 m-1' > 1 < / div >
< div کلاس = 'آخری آرڈر bg-yellow-500 w-32 m-1' > 2 < / div >
< div کلاس = 'آرڈر-فرسٹ bg-teal-500 w-32 m-1' > 3 < / div >
< div کلاس = 'آرڈر-2 bg-اورنج-500 w-32 m-1' > 4 < / div >
< / div >
< / جسم >
یہاں:
- ' آرڈر-3 کلاس عنصر کی ترتیب کو 3 پر سیٹ کرتی ہے اور فلیکس آئٹم کو فلیکس کنٹینر کے اندر تیسری آئٹم کے طور پر رکھا جائے گا۔
- ' آرڈر-آخری 'کلاس عنصر کے آرڈر کو آخری ہونے کے لیے سیٹ کرتی ہے اور یہ فلیکس کنٹینر کے اندر آخری آئٹم ہوگی۔
- ' سب سے پہلے آرڈر 'کلاس عنصر کے پہلے ہونے کی ترتیب بتاتا ہے اور اسے فلیکس کنٹینر کے اندر پہلی شے کے طور پر رکھا جائے گا۔
- ' آرڈر-2 کلاس عنصر کی ترتیب کو 2 پر سیٹ کرتی ہے اور اسے فلیکس کنٹینر کے اندر دوسری آئٹم کے طور پر رکھا جائے گا۔
- ' w-32 کلاس ہر فلیکس آئٹم پر چوڑائی کے 32 یونٹ لاگو کرتی ہے۔
- ' m-1 کلاس ہر فلیکس آئٹم کے ارد گرد 1 یونٹ مارجن کا اضافہ کرتی ہے۔
مرحلہ 2: آؤٹ پٹ کی تصدیق کریں۔
یہ یقینی بنانے کے لیے کہ فلیکس اور گرڈ آئٹمز کا آرڈر دیا گیا ہے HTML ویب صفحہ دیکھیں:
یہ دیکھا جا سکتا ہے کہ فلیکس اور گرڈ اشیاء کو کامیابی کے ساتھ آرڈر کیا گیا ہے جس کے مطابق ان کی وضاحت کی گئی تھی۔
نتیجہ
Tailwind CSS میں فلیکس اور گرڈ آئٹمز آرڈر کرنے کے لیے، ' آرڈر -