افقی جگہ ایک فلیکس یا گرڈ کنٹینر کے چائلڈ عناصر کے درمیان ایکس محور کے ساتھ ایک جگہ ہے جب وہ ایک قطار میں ترتیب دیئے جاتے ہیں۔ عمودی جگہ ایک فلیکس یا گرڈ کنٹینر کے چائلڈ ایلیمنٹس کے درمیان y-axis کے ساتھ ایک جگہ ہے جب انہیں کالم میں ترتیب دیا جاتا ہے۔
یہ مضمون ظاہر کرے گا:
- Tailwind میں عناصر کے درمیان افقی جگہ کیسے شامل کی جائے؟
- Tailwind میں عناصر کے درمیان عمودی جگہ کیسے شامل کی جائے؟
Tailwind میں عناصر کے درمیان افقی جگہ کیسے شامل کی جائے؟
Tailwind میں عناصر کے درمیان افقی جگہ شامل کرنے کے لیے، ' space-x-
نحو
<عنصر کلاس = 'space-x-
یہاں، 'x' 'x-axis' یا 'horizontal space' کی نمائندگی کرتا ہے۔ اس بات کو یقینی بنائیں کہ '
مثال: ٹیل ونڈ میں عناصر کے درمیان افقی جگہ لگانا
اس مثال میں، ہمارے پاس کچھ چائلڈ عناصر کے ساتھ ایک فلیکس کنٹینر ہے۔ ہم استعمال کریں گے ' space-x-8 'یوٹیلٹی کلاس' کے ساتھ یہاں، پیرنٹ بچے میں آؤٹ پٹ مندرجہ بالا آؤٹ پٹ اشارہ کرتا ہے کہ فلیکس عنصر کے درمیان افقی جگہ کو کامیابی سے لاگو کیا گیا ہے. Tailwind میں عناصر کے درمیان عمودی جگہ شامل کرنے کے لیے، ' space-y- نحو یہاں، 'y' 'y-axis' یا 'عمودی جگہ' کی نمائندگی کرتا ہے۔ اس بات کو یقینی بنائیں کہ ' مثال: ٹیل ونڈ میں عناصر کے درمیان عمودی جگہ لگانا اس مثال میں، ہمارے پاس ایک فلیکس کنٹینر ہے جس میں ایک کالم میں کچھ چائلڈ عناصر ہیں۔ ہم استعمال کریں گے ' space-y-5 'یوٹیلٹی کلاس' کے ساتھ یہاں: آؤٹ پٹ فلیکس عناصر کے درمیان عمودی جگہ کو مؤثر طریقے سے لاگو کیا گیا ہے. Tailwind میں عناصر کے درمیان افقی اور عمودی جگہ کو شامل کرنے کے لیے، ' space-x-
< جسم >
< div کلاس = 'flex space-x-8 m-10 h-20 w-max' >
< div کلاس = 'bg-teal-500 w-20 p-5' > 1 < / div >
< div کلاس = 'bg-teal-500 w-20 p-5' > 2 < / div >
< div کلاس = 'bg-teal-500 w-20 p-5' > 3 < / div >
< div کلاس = 'bg-teal-500 w-20 p-5' > 4 < / div >
< div کلاس = 'bg-teal-500 w-20 p-5' > 5 < / div >
< div کلاس = 'bg-teal-500 w-20 p-5' > 6 < / div >
< / div >
< / جسم >
Tailwind میں عناصر کے درمیان عمودی جگہ کیسے شامل کی جائے؟
< div کلاس = 'flex flex-col space-y-5 m-10 text-center' >
< div کلاس = 'bg-teal-500 p-5' > 1 < / div >
< div کلاس = 'bg-teal-500 p-5' > 2 < / div >
< div کلاس = 'bg-teal-500 p-5' > 3 < / div >
< div کلاس = 'bg-teal-500 p-5' > 4 < / div >
< / div >
< / جسم >
نتیجہ