Source

فلیکس

ریسپانسیو فلیکس باکس یوٹیلیٹیز کے مکمل سوٹ کے ساتھ گرڈ کالمز، نیویگیشن، اجزاء، اور مزید کی ترتیب، سیدھ، اور سائز کا تیزی سے نظم کریں۔ مزید پیچیدہ نفاذ کے لیے، حسب ضرورت CSS ضروری ہو سکتی ہے۔

فلیکس طرز عمل کو فعال کریں۔

displayفلیکس باکس کنٹینر بنانے کے لیے یوٹیلیٹیز کا اطلاق کریں اور بچوں کے براہ راست عناصر کو فلیکس آئٹمز میں تبدیل کریں۔ فلیکس کنٹینرز اور اشیاء اضافی فلیکس خصوصیات کے ساتھ مزید ترمیم کرنے کے قابل ہیں۔

میں ایک فلیکس باکس کنٹینر ہوں!

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

میں ایک ان لائن فلیکس باکس کنٹینر ہوں!

<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

جوابی تغیرات .d-flexاور کے لیے بھی موجود ہیں .d-inline-flex۔

.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex

سمت

سمت افادیت کے ساتھ فلیکس کنٹینر میں فلیکس اشیاء کی سمت متعین کریں۔ زیادہ تر معاملات میں آپ یہاں افقی کلاس کو خارج کر سکتے ہیں جیسا کہ براؤزر ڈیفالٹ ہے row۔ تاہم، آپ کو ایسے حالات کا سامنا کرنا پڑ سکتا ہے جہاں آپ کو یہ قدر واضح طور پر سیٹ کرنے کی ضرورت ہو (جیسے ریسپانسیو لے آؤٹ)۔

افقی سمت سیٹ کرنے کے لیے استعمال کریں .flex-row(براؤزر کا ڈیفالٹ)، یا .flex-row-reverseمخالف سمت سے افقی سمت شروع کرنے کے لیے۔

فلیکس آئٹم 1

فلیکس آئٹم 2

فلیکس آئٹم 3

فلیکس آئٹم 1

فلیکس آئٹم 2

فلیکس آئٹم 3

<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

.flex-columnعمودی سمت متعین کرنے کے لیے، یا .flex-column-reverseمخالف سمت سے عمودی سمت شروع کرنے کے لیے استعمال کریں ۔

فلیکس آئٹم 1

فلیکس آئٹم 2

فلیکس آئٹم 3

فلیکس آئٹم 1

فلیکس آئٹم 2

فلیکس آئٹم 3

<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

جوابی تغیرات کے لیے بھی موجود ہیں flex-direction۔

.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse

مواد کا جواز پیش کریں۔

justify-contentمرکزی محور پر فلیکس آئٹمز کی سیدھ کو تبدیل کرنے کے لیے فلیکس باکس کنٹینرز پر یوٹیلیٹیز استعمال کریں (شروع کرنے کے لیے x-axis، y-axis if flex-direction: column)۔ میں سے انتخاب کریں start(براؤزر ڈیفالٹ)، end, center, betweenیا around.

فلیکس آئٹم

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

جوابی تغیرات کے لیے بھی موجود ہیں justify-content۔

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around

اشیاء کو سیدھ کریں۔

کراس ایکسس (شروع کرنے کے لیے y-axis، x-axis if ) align-itemsپر فلیکس آئٹمز کی سیدھ کو تبدیل کرنے کے لیے فلیکس باکس کنٹینرز پر یوٹیلیٹیز استعمال کریں ۔ , , , , یا (براؤزر ڈیفالٹ) flex-direction: columnمیں سے انتخاب کریں ۔startendcenterbaselinestretch

فلیکس آئٹم

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

جوابی تغیرات کے لیے بھی موجود ہیں align-items۔

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch

خود کو سیدھ میں لانا

align-selfفلیکس باکس آئٹمز پر یوٹیلیٹیز کا استعمال کراس ایکسس (شروع کرنے کے لیے y-axis، x-axis if flex-direction: column) پر انفرادی طور پر ان کی صف بندی کو تبدیل کریں۔ انہی اختیارات میں سے انتخاب کریں جیسے align-items: start, end, center, baseline, یا stretch(browser default)۔

فلیکس آئٹم

منسلک فلیکس آئٹم

فلیکس آئٹم

منسلک فلیکس آئٹم

فلیکس آئٹم

منسلک فلیکس آئٹم

فلیکس آئٹم

منسلک فلیکس آئٹم

فلیکس آئٹم

منسلک فلیکس آئٹم

فلیکس آئٹم

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

جوابی تغیرات کے لیے بھی موجود ہیں align-self۔

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch

بھرنا

تمام دستیاب افقی جگہ لینے کے دوران بہن بھائی عناصر کی ایک سیریز پر .flex-fillکلاس کو ان کے مواد کے برابر چوڑائی (یا مساوی چوڑائی اگر ان کا مواد ان کے بارڈر بکس سے آگے نہیں بڑھتا ہے) پر مجبور کرنے کے لیے استعمال کریں۔

بہت سارے مواد کے ساتھ فلیکس آئٹم

فلیکس آئٹم

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

جوابی تغیرات کے لیے بھی موجود ہیں flex-fill۔

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill

بڑھو اور سکڑو

.flex-grow-*دستیاب جگہ کو بھرنے کے لیے فلیکس آئٹم کے بڑھنے کی صلاحیت کو ٹوگل کرنے کے لیے یوٹیلیٹیز کا استعمال کریں ۔ ذیل کی مثال میں، .flex-grow-1عناصر تمام دستیاب جگہ کا استعمال کر سکتے ہیں، جبکہ باقی دو فلیکس اشیاء کو ان کی ضروری جگہ کی اجازت دیتے ہیں۔

فلیکس آئٹم

تیسرا فلیکس آئٹم

<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

.flex-shrink-*اگر ضروری ہو تو کسی فلیکس آئٹم کے سکڑنے کی صلاحیت کو ٹوگل کرنے کے لیے یوٹیلیٹیز استعمال کریں ۔ نیچے دی گئی مثال میں، کے ساتھ دوسری فلیکس آئٹم کو .flex-shrink-1اس کے مواد کو ایک نئی لائن میں لپیٹنے پر مجبور کیا جاتا ہے، "سکڑنے" کے ساتھ پچھلی فلیکس آئٹم کے لیے مزید جگہ دینے کے لیے .w-100۔

فلیکس آئٹم

<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

جوابی تغیرات flex-growاور کے لیے بھی موجود ہیں flex-shrink۔

.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1

آٹو مارجنز

جب آپ فلیکس الائنمنٹس کو آٹو مارجن کے ساتھ ملاتے ہیں تو Flexbox کچھ بہت ہی زبردست چیزیں کر سکتا ہے۔ آٹو مارجن کے ذریعے فلیکس آئٹمز کو کنٹرول کرنے کی تین مثالیں ذیل میں دکھائی گئی ہیں: ڈیفالٹ (کوئی آٹو مارجن نہیں)، دو آئٹمز کو دائیں طرف .mr-autoدھکیلنا ( )، اور دو آئٹمز کو بائیں طرف دھکیلنا ( .ml-auto)۔

بدقسمتی سے، IE10 اور IE11 ایسے فلیکس آئٹمز پر آٹو مارجن کو درست طریقے سے سپورٹ نہیں کرتے ہیں جن کے پیرنٹ کی غیر ڈیفالٹ justify-contentقدر ہے۔ مزید تفصیلات کے لیے یہ StackOverflow جواب دیکھیں۔

فلیکس آئٹم

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="mr-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>

الائن آئٹمز کے ساتھ

عمودی طور پر ایک فلیکس آئٹم کو align-items, flex-direction: column, اور margin-top: autoیا ملا کر کنٹینر کے اوپر یا نیچے منتقل کریں margin-bottom: auto۔

فلیکس آئٹم

<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

لپیٹنا

تبدیل کریں کہ فلیکس کنٹینر میں فلیکس اشیاء کیسے لپیٹیں۔ کے ساتھ ریپنگ بالکل نہیں (براؤزر ڈیفالٹ) سے انتخاب کریں .flex-nowrap، کے ساتھ ریپنگ .flex-wrap، یا کے ساتھ ریورس ریپنگ .flex-wrap-reverse۔

فلیکس آئٹم

<div class="d-flex flex-nowrap">
  ...
</div>

فلیکس آئٹم

<div class="d-flex flex-wrap">
  ...
</div>

فلیکس آئٹم

<div class="d-flex flex-wrap-reverse">
  ...
</div>

جوابی تغیرات کے لیے بھی موجود ہیں flex-wrap۔

.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse

ترتیب

مٹھی بھر یوٹیلیٹیز کے ساتھ مخصوص فلیکس آئٹمز کی بصری ترتیب کو تبدیل کریں ۔ orderہم صرف ایک آئٹم کو پہلے یا آخری بنانے کے ساتھ ساتھ DOM آرڈر کو استعمال کرنے کے لیے دوبارہ ترتیب دینے کے اختیارات فراہم کرتے ہیں۔ جیسا کہ orderکوئی بھی عددی قدر لیتا ہے (مثال کے طور پر 5)، کسی بھی اضافی قدر کی ضرورت کے لیے حسب ضرورت CSS شامل کریں۔

پہلا فلیکس آئٹم

دوسرا فلیکس آئٹم

تیسرا فلیکس آئٹم

<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

جوابی تغیرات کے لیے بھی موجود ہیں order۔

.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-6
.order-sm-7
.order-sm-8
.order-sm-9
.order-sm-10
.order-sm-11
.order-sm-12
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
.order-md-9
.order-md-10
.order-md-11
.order-md-12
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-6
.order-xl-7
.order-xl-8
.order-xl-9
.order-xl-10
.order-xl-11
.order-xl-12

مواد کو سیدھ کریں۔

فلیکس آئٹمز کو کراس ایکسس پر ایک ساتھalign-content سیدھ میں لانے کے لیے فلیکس باکس کنٹینرز پر یوٹیلیٹیز استعمال کریں ۔ (براؤزر ڈیفالٹ) میں سے انتخاب کریں ، , , , یا . ان افادیت کو ظاہر کرنے کے لیے، ہم نے فلیکس آئٹمز کی تعداد کو نافذ اور بڑھا دیا ہے۔startendcenterbetweenaroundstretchflex-wrap: wrap

سنو! اس پراپرٹی کا فلیکس آئٹمز کی ایک قطار پر کوئی اثر نہیں ہوتا ہے۔

فلیکس آئٹم

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

فلیکس آئٹم

<div class="d-flex align-content-end flex-wrap">...</div>

فلیکس آئٹم

<div class="d-flex align-content-center flex-wrap">...</div>

فلیکس آئٹم

<div class="d-flex align-content-between flex-wrap">...</div>

فلیکس آئٹم

<div class="d-flex align-content-around flex-wrap">...</div>

فلیکس آئٹم

<div class="d-flex align-content-stretch flex-wrap">...</div>

جوابی تغیرات کے لیے بھی موجود ہیں align-content۔

.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch