میں اس ٹول کا استعمال کرتے ہوئے flexbox سے ایک div کو درمیان میں کیسے رکھوں؟

بالکل درمیانی پری سیٹ کا انتخاب کریں، جو کنٹینر پر justify-content: center اور align-items: center سیٹ کرتا ہے۔ پھر CSS کاپی کریں دبائیں اور اسے اپنی اسٹائل شیٹ میں چسپاں کریں۔

میں flexbox کی کن خصوصیات کو تبدیل کر سکتا ہوں؟

آپ flex-direction، flex-wrap، justify-content، align-items، align-content اور Gap سیٹ کر سکتے ہیں۔ آپ اشیاء کی تعداد 1 سے 10 اور پیش نمائش کی اونچائی بھی تبدیل کر سکتے ہیں۔

میں ایک آئٹم پر flex-grow کیسے کام کرتا ہے دیکھ سکتا ہوں؟

براہ راست پیش منظر میں کسی آئٹم پر کلک کریں تاکہ اس پر flex-grow: 1 کو ٹوگل کیا جا سکے، اور اسے ہٹانے کے لیے دوبارہ کلک کریں۔ تیار کردہ CSS پھر اس آئٹم کے لیے ایک .item:nth-child قاعدہ شامل کرتا ہے۔

کیا شروعاتی پری سیٹس ہیں، جیسے نیویگیشن بار یا کارڈ کی صف؟

جی ہاں۔ پری سیٹس نیویگیشن بار، بالکل درمیانی، سائڈ بار لے آؤٹ اور بند کرتی ہوئی کارڈ کی صف ہیں۔ ہر ایک اقدار کا ایک سیٹ لوڈ کرتا ہے جسے آپ بعد میں ایڈجسٹ کر سکتے ہیں۔

پیش منظر میں align-content کچھ نہیں کرتا دکھائی دیتا ہے، ایسا کیوں ہے؟

align-content صرف اس وقت اثر انداز ہوتا ہے جب آئٹمز کئی لائنوں پر لپیٹیں۔ پیش منظر میں یہ صرف اس وقت لاگو ہوتا ہے جب wrap، nowrap نہ ہو، لہذا پہلے flex-wrap کو wrap پر سیٹ کریں۔

کیا یہ واقعی مفت ہے؟

جی ہاں۔ ہر ٹول مفت استعمال کے لیے ہے، بغیر اکاؤنٹ اور بغیر کریڈٹ کارڈ کے۔ کام ہمارے سرورز کی بجائے آپ کے آلے پر چلتا ہے، جو اسے چلانے میں مفت رکھتا ہے۔

کیا یہ موبائل پر کام کرتا ہے؟

جی ہاں۔ یہ iOS اور Android کے موجودہ موبائل براؤزرز میں چلتا ہے، کچھ انسٹال کرنے کی ضرورت نہیں۔

↔️

مفت CSS Flexbox جنریٹر

flex سمت، wrap، justify اور align کے ساتھ براہ راست اشیاء کے ساتھ تجربہ کریں — اور CSS کو کاپی کریں۔

آپ کے براؤزر میں چلتا ہےسائن اپ نہیں، پاپ اپ نہیںلاگ ان کی ضرورت نہیںہمیشہ کے لیے مفت

لوڈ ہونے کے بعد آف لائن کام کرتا ہے

بصری flexbox کھیل کا میدان: سمت، wrap، justify-content، align-items اور gap سیٹ کریں، اشیاء کی تعداد میں تبدیلی کریں، اور پیش نظارے میں کسی چیز پر کلک کریں تاکہ اس پر flex-grow دیں۔ CSS براہ راست اپڈیٹ ہوتا ہے، کاپی کرنے کے لیے تیار۔

پری سیٹ

flex-direction

flex-wrap

justify-content

align-items

وقفہ: 12pxاشیاء: 4پیش نمائش کی اونچائی: 176px

نکتہ: پیش نظارے میں کسی چیز پر کلک کریں تاکہ اس پر flex-grow: 1 کو ٹوگل کریں۔

براہ راست پیش نظارہ

css

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

html

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 سب کچھ آپ کے براؤزر میں چلتا ہے — کوئی چیز اپ لوڈ نہیں ہوتی۔

یہ کیسے کام کرتا ہے

ایک متعامل flexbox کھیل کا میدان: flex-direction، wrap، justify-content اور align-items بدلیں اور 10 تک براہ راست آئٹمز کو فوراً دوبارہ ترتیب دیتا دیکھیں۔ کسی بھی آئٹم پر کلک کریں تاکہ اسے flex-grow: 1 دیں اور دیکھیں یہ کیسے جگہ پر قبضہ کرتا ہے۔ CSS براہ راست اپ ڈیٹ ہوتا ہے، آپ کے پروجیکٹ میں کاپی کرنے کے لیے تیار۔

1
container مقرر کریں
سمت، wrap، justify-content، align-items، gap۔
2
آئٹمز شامل کریں
ایک سے دس نمبردار flex آئٹمز۔
3
تجربہ کریں
flex-grow کو ٹوگل کرنے اور اثر دیکھنے کے لیے کسی آئٹم پر کلک کریں۔
4
CSS کاپی کریں
container (اور آئٹم) قواعد، پیسٹ کے لیے تیار۔

سب کچھ آپ کے براؤزر میں چلتا ہے — کچھ بھی اپ لوڈ نہیں ہوتا۔

مفت CSS Flexbox جنریٹر

یہ کیسے کام کرتا ہے

متعلقہ ٹولز

CSS گرڈ جنریٹر

CSS گریڈینٹ جنریٹر

CSS Box Shadow جنریٹر

اکثر پوچھے جانے والے سوالات