پرفیکٹ فلیکس باکس لے آؤٹ بنائیں

ہمارے بدیہی ڈریگ اینڈ ڈراپ انٹرفیس کے ساتھ CSS فلیکس باکس کوڈ کو تصور کریں، حسب ضرورت بنائیں اور بنائیں۔

کنٹینر پراپرٹیز

آئٹم کی خصوصیات

3 items

Preview

Item 1
Item 2
Item 3
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
CSS کوڈ تیار کیا گیا۔

مشہور فلیکس باکس پیش سیٹ

وسط افقی اور عمودی طور پر

Content

لوگو، بٹن، یا کسی بھی عنصر کو افقی اور عمودی طور پر مرکز کرنے کے لیے بہترین ہے۔

مساوی وقفہ

Item 1
Item 2
Item 3

اسپیس کے درمیان یا آس پاس کے عناصر کے درمیان مساوی فاصلہ بنائیں۔

عمودی مینو

Home
About
Contact

متواتر وقفہ کاری اور سیدھ کے ساتھ عمودی نیویگیشن مینو بنائیں۔

قبول گرڈ

Box 1
Box 2
Box 3
Box 4
Box 5

ایک ریسپانسیو گرڈ لے آؤٹ بنائیں جو دستیاب جگہ کی بنیاد پر آئٹمز کو لپیٹ دے۔

ہیرو بینر

مرکزی عنوان

کال ٹو ایکشن کے ساتھ ہیرو سیکشن

عنوان، سب ٹائٹل اور کال ٹو ایکشن بٹن کے ساتھ ہیرو بینر ڈیزائن کریں۔

فوٹر لے آؤٹ

Company

About Us

Careers

Support

امدادی مرکز

ہم سے رابطہ کریں۔

© 2023 Flexbox جنریٹر

کالموں کے ساتھ ایک ریسپانسیو فوٹر بنائیں جو چھوٹی اسکرینوں پر ڈھیر ہوں۔

حقیقی دنیا کی مثالیں۔

نیویگیشن بار

Logo
Home
Products
About
Contact

بائیں طرف لوگو کے ساتھ ایک عام نیویگیشن بار لے آؤٹ، بیچ میں مینو آئٹمز، اور دائیں طرف ایک کارٹ آئیکن۔

Card Grid

کارڈ کا عنوان

کارڈ کی تفصیل کا متن یہاں

کارڈ کا عنوان

کارڈ کی تفصیل کا متن یہاں

کارڈ کا عنوان

کارڈ کی تفصیل کا متن یہاں

ایک ریسپانسیو کارڈ گرڈ جو flexbox کی خصوصیات کا استعمال کرتے ہوئے مختلف اسکرین کے سائز کے مطابق ہوتا ہے۔

آرٹیکل لے آؤٹ

مضمون کا عنوان

1 جنوری 2023 کو پوسٹ کیا گیا · 5 منٹ پڑھا گیا۔

مضمون کا مواد یہاں۔ یہ ایک مختصر خلاصہ یا مکمل مضمون کا متن ہو سکتا ہے۔ Flexbox تصویر اور متن کو بصری طور پر دلکش انداز میں سیدھ میں لانے میں مدد کرتا ہے۔

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

ڈیش بورڈ لے آؤٹ

Header
Sidebar
اہم مواد
Footer

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

Flexbox کے بنیادی اصول

Flexbox کیا ہے؟

لچکدار باکس لے آؤٹ، جسے عام طور پر Flexbox کے نام سے جانا جاتا ہے، ایک CSS3 لے آؤٹ ماڈل ہے جو کنٹینر میں موجود اشیاء کے درمیان جگہ کی تقسیم اور سیدھ میں لانے کا ایک موثر طریقہ فراہم کرتا ہے، یہاں تک کہ جب ان کا سائز نامعلوم یا متحرک ہو۔

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

کلیدی تصورات:Flexbox دو اہم تصورات متعارف کراتا ہے:فلیکس کنٹینر and the فلیکس اشیاء. کنٹینر بنیادی عنصر ہے، اور اشیاء اس کے براہ راست بچے ہیں.

مین محور بمقابلہ کراس ایکسس

Flexbox لے آؤٹ دو محوروں پر مبنی ہیں:main axis and the کراس محور.

  • مرکزی محور:بنیادی محور جس کے ساتھ فلیکس آئٹمز رکھے گئے ہیں۔ کی طرف سے تعریفflex-direction.
  • کراس ایکسس:محور مرکزی محور پر کھڑا ہے۔ اس کی سمت مرکزی محور کی سمت پر منحصر ہے۔
مرکزی محور →
← کراس ایکسس
Start
Main
End

کنٹینر پراپرٹیز

Property Description
display ایک فلیکس کنٹینر کی وضاحت کرتا ہے؛ دی گئی قدر کے لحاظ سے ان لائن یا بلاک۔
flex-direction مرکزی محور کو قائم کرتا ہے، اس طرح سمت کی وضاحت کرتا ہے فلیکس اشیاء کو فلیکس کنٹینر میں رکھا جاتا ہے۔
flex-wrap پہلے سے طے شدہ طور پر، فلیکس آئٹمز سبھی ایک لائن پر فٹ ہونے کی کوشش کریں گے۔ آپ اسے تبدیل کر سکتے ہیں اور اس پراپرٹی کے ساتھ ضرورت کے مطابق اشیاء کو لپیٹنے کی اجازت دے سکتے ہیں۔
justify-content فلیکس کنٹینر کی موجودہ لائن کے مرکزی محور کے ساتھ فلیکس آئٹمز کو سیدھ میں کرتا ہے۔
align-items فلیکس کنٹینر کی موجودہ لائن کے کراس ایکسس کے ساتھ فلیکس آئٹمز کو سیدھ میں کرتا ہے۔
align-content جب کراس ایکسس میں اضافی جگہ ہو تو فلیکس کنٹینر کی لائنوں کو اندر سیدھ میں کرتا ہے۔

آئٹم کی خصوصیات

Property Description
order پہلے سے طے شدہ طور پر، فلیکس آئٹمز سورس آرڈر میں رکھے جاتے ہیں۔ تاہم، کےorderپراپرٹی اس ترتیب کو کنٹرول کرتی ہے جس میں وہ فلیکس کنٹینر میں ظاہر ہوتے ہیں۔
flex-grow اگر ضروری ہو تو فلیکس آئٹم کے بڑھنے کی صلاحیت کی وضاحت کرتا ہے۔ یہ ایک یونٹ لیس قدر کو قبول کرتا ہے جو ایک تناسب کے طور پر کام کرتا ہے۔
flex-shrink اگر ضروری ہو تو فلیکس آئٹم کے سکڑنے کی صلاحیت کی وضاحت کرتا ہے۔
flex-basis کسی بھی دستیاب جگہ کو فلیکس عوامل کے مطابق تقسیم کرنے سے پہلے فلیکس آئٹم کے ابتدائی سائز کی وضاحت کرتا ہے۔
align-self پہلے سے طے شدہ سیدھ کی اجازت دیتا ہے (یا جس کی وضاحت کی گئی ہے۔align-items) انفرادی فلیکس آئٹمز کے لیے اوور رائیڈ کیا جائے۔

Related Tools

سس ٹو سی ایس ایس کنورٹر

اپنے Sass کوڈ کو CSS میں تبدیل کریں۔ تیز، آسان اور محفوظ۔

اسٹائلس ٹو سی ایس ایس کنورٹر

اپنے SCSS کوڈ کو CSS میں تبدیل کریں۔ تیز، آسان اور محفوظ۔

SCSS سے CSS کنورٹر

اپنے SCSS کوڈ کو CSS میں تبدیل کریں۔ تیز، آسان اور محفوظ۔

سی ایس ایس کیوبک بیزیئر جنریٹر

سی ایس ایس کیوبک بیزیئر جنریٹر کو آسان کرنے کے افعال بنائیں

آن لائن ٹیکسٹ شیڈو سی ایس ایس جنریٹر

اپنی ویب سائٹ کے لیے شاندار گریڈینٹ ٹیکسٹ ایفیکٹس بنائیں

سی ایس ایس کالم جنریٹر آن لائن ٹول

حسب ضرورت سی ایس ایس آسان کرنے والے فنکشنز بنائیں اور ان کا تصور کریں۔