فليڪس

فليڪس رويي کي فعال ڪريو

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

مواد کي درست ڪريو

flexbox ڪنٽينرز تي يوٽيلٽيز استعمال ڪريو justify-contentمکيه محور تي flex شيون جي ترتيب کي تبديل ڪرڻ لاءِ (x-axis to start, y-axis if flex-direction: column). مان چونڊيو start(براؤزر ڊفالٽ)، end, center, between, around, or 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

شيون ترتيب ڏيو

flexbox ڪنٽينرز تي يوٽيلٽيز استعمال ڪريو align-itemsڪراس محور تي فليڪس شيون جي ترتيب کي تبديل ڪرڻ لاءِ (شروع ڪرڻ لاءِ y-axis، x-axis if flex-direction: column). مان چونڊيو start, end, , center, baseline, or stretch(browser default).

<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

پاڻ کي ترتيب ڏيو

يوٽيلٽيز استعمال ڪريو align-selfflexbox شيون تي انفرادي طور تي انھن جي ترتيب کي تبديل ڪرڻ لاءِ ڪراس محور تي (شروع ڪرڻ لاءِ y-axis، x-axis if flex-direction: column). ساڳين اختيارن مان چونڊيو جيئن align-items: start, end, center, , baseline, or 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افاديت سان. اسان صرف اختيار ڏيون ٿا ھڪڙي شيون ٺاهڻ لاءِ پھريون يا آخري، ۽ گڏو گڏ ڊوم آرڊر استعمال ڪرڻ لاءِ ري سيٽ. جيئن ته 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: -1ٿا order: 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-contentflexbox ڪنٽينرز تي يوٽيلٽيز استعمال ڪريو فليڪس شيون گڏ ڪرڻ لاءِ ڪراس محور تي. مان چونڊيو start(براؤزر ڊفالٽ)، end, center, between, around, or stretch. انهن افاديت کي ظاهر ڪرڻ لاء، اسان لاڳو ڪيو آهي flex-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,
      ),
    ),