فلیکس

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

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
• .d-xxl-flex
• .d-xxl-inline-flex

سمت

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

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

<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مخالف سمت سے عمودی سمت شروع کرنے کے لیے استعمال کریں ۔

<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
• .flex-xxl-row
• .flex-xxl-row-reverse
• .flex-xxl-column
• .flex-xxl-column-reverse

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

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

<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>
<div class="d-flex justify-content-evenly">...</div>

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

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

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

کراس ایکسس (شروع کرنے کے لیے 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-items-xxl-start
• .align-items-xxl-end
• .align-items-xxl-center
• .align-items-xxl-baseline
• .align-items-xxl-stretch

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

انفرادی طور پر کراس ایکسس (شروع کرنے کے لیے y-axis، x-axis if ) align-selfپر ان کی صف بندی کو تبدیل کرنے کے لیے flexbox آئٹمز پر یوٹیلیٹیز استعمال کریں ۔ 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
• .align-self-xxl-start
• .align-self-xxl-end
• .align-self-xxl-center
• .align-self-xxl-baseline
• .align-self-xxl-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-xxl-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
• .flex-xxl-{grow|shrink}-0
• .flex-xxl-{grow|shrink}-1

آٹو مارجنز

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

<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="me-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="ms-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
• .flex-xxl-nowrap
• .flex-xxl-wrap
• .flex-xxl-wrap-reverse

ترتیب

مٹھی بھر یوٹیلیٹیز کے ساتھ مخصوص فلیکس آئٹمز کی بصری ترتیب کو تبدیل کریں ۔ orderہم صرف ایک آئٹم کو پہلے یا آخری بنانے کے ساتھ ساتھ DOM آرڈر کو استعمال کرنے کے لیے دوبارہ ترتیب دینے کے اختیارات فراہم کرتے ہیں۔ جیسا کہ order0 سے 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-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xxl-0
• .order-xxl-1
• .order-xxl-2
• .order-xxl-3
• .order-xxl-4
• .order-xxl-5

مزید برآں جوابی .order-firstاور .order-lastکلاسیں بھی ہیں جو بالترتیب لاگو کرکے orderعنصر کو تبدیل کرتی ہیں۔order: -1order: 6

• .order-first
• .order-last
• .order-sm-first
• .order-sm-last
• .order-md-first
• .order-md-last
• .order-lg-first
• .order-lg-last
• .order-xl-first
• .order-xl-last
• .order-xxl-first
• .order-xxl-last

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

فلیکس آئٹمز کو کراس ایکسس پر ایک ساتھ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
• .align-content-xxl-start
• .align-content-xxl-end
• .align-content-xxl-center
• .align-content-xxl-around
• .align-content-xxl-stretch

میڈیا اعتراض

بوٹسٹریپ 4 سے میڈیا آبجیکٹ کے اجزاء کی نقل تیار کرنا چاہتے ہیں ؟ اسے چند فلیکس یوٹیلیٹیز کے ساتھ دوبارہ بنائیں جو پہلے سے کہیں زیادہ لچک اور حسب ضرورت کی اجازت دیتی ہیں۔

<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

اور کہیں کہ آپ تصویر کے آگے مواد کو عمودی طور پر مرکز میں رکھنا چاہتے ہیں:

<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

سس

یوٹیلیٹیز API

Flexbox افادیت کا اعلان ہماری یوٹیلیٹیز API میں scss/_utilities.scss. یوٹیلیٹیز API کو استعمال کرنے کا طریقہ سیکھیں۔

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),