فلیکس

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

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

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

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

<div class="d-inline-flex p-2">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مخالف سمت سے افقی سمت شروع کرنے کے لیے۔

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

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

<div class="d-flex flex-column">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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

آٹو مارجنز

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

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

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

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

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

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

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

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

<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">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">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">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