مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
Check
in English

فليڪس

فوري طور تي ترتيب ڏيڻ، ترتيب ڏيڻ، ۽ گرڊ ڪالمن جي ماپ، نيويگيشن، اجزاء، ۽ وڌيڪ جوابي فلڪس باڪس يوٽيلٽيز جي مڪمل سوٽ سان. وڌيڪ پيچيده عملن لاء، ڪسٽم CSS ضروري ٿي سگھي ٿو.

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

displayفليڪس باڪس ڪنٽينر ٺاهڻ لاءِ يوٽيلٽيز لاڳو ڪريو ۽ سڌو ٻارن جي عنصرن کي فليڪس شين ۾ تبديل ڪريو. فليڪس ڪنٽينرز ۽ شيون اضافي فليڪس ملڪيتن سان وڌيڪ تبديل ٿي سگھن ٿيون.

مان هڪ flexbox ڪنٽينر آهيان!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
مان هڪ ان لائن flexbox ڪنٽينر آهيان!
html
<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
  • .d-xxl-flex
  • .d-xxl-inline-flex

ھدايت

هدايت جي افاديت سان هڪ فليڪس ڪنٽينر ۾ فليڪس شيون جي هدايت مقرر ڪريو. اڪثر ڪيسن ۾ توهان هتي افقي طبقي کي ختم ڪري سگهو ٿا جيئن ته برائوزر ڊفالٽ آهي row. تنهن هوندي، توهان شايد حالتن سان منهن ڏئي سگهون ٿا جتي توهان کي واضح طور تي هي قدر مقرر ڪرڻ جي ضرورت آهي (جهڙوڪ جوابي ترتيب).

.flex-rowافقي طرف مقرر ڪرڻ لاءِ استعمال ڪريو (براؤزر ڊفالٽ)، يا .flex-row-reverseسامهون واري پاسي کان افقي طرف شروع ڪرڻ لاءِ.

فليڪس شيون 1
فليڪس شيون 2
فليڪس شئي 3
فليڪس شيون 1
فليڪس شيون 2
فليڪس شئي 3
html
<div class="d-flex flex-row mb-3">
  <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سامهون واري پاسي کان عمودي طرف شروع ڪرڻ لاءِ.

فليڪس شيون 1
فليڪس شيون 2
فليڪس شئي 3
فليڪس شيون 1
فليڪس شيون 2
فليڪس شئي 3
html
<div class="d-flex flex-column mb-3">
  <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
  • .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ڀائرن جي عنصرن جي ھڪڙي سيريز تي انھن کي مجبور ڪرڻ لاءِ انھن جي مواد جي برابر ويڪر (يا برابر ويڪر جيڪڏھن انھن جو مواد انھن جي بارڊر-بڪس کان وڌيڪ نه آھي) جڏھن سڀ موجود افقي جڳھ کڻڻ دوران.

تمام گهڻي مواد سان فليڪس شيون
لچڪدار شيءِ
لچڪدار شيءِ
html
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">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عناصر استعمال ڪري سگھن ٿا تمام دستياب جڳھ اھو ڪري سگھي ٿو، باقي ٻن فليڪس شين کي انھن جي ضروري جڳھ جي اجازت ڏئي ٿي.

لچڪدار شيءِ
لچڪدار شيءِ
ٽيون لچڪدار شيءِ
html
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

.flex-shrink-*جيڪڏهن ضروري هجي ته لچڪدار شيءِ کي ڇڪڻ جي صلاحيت کي ٽوگل ڪرڻ لاءِ يوٽيلٽيز استعمال ڪريو . هيٺ ڏنل مثال ۾، ٻئي فليڪس آئٽم سان گڏ .flex-shrink-1ان جي مواد کي نئين لڪير تي لپڻ تي مجبور ڪيو ويو آهي، "ڇڪڻ" سان اڳئين فليڪس شيون لاء وڌيڪ جاء جي اجازت ڏيڻ لاء .w-100.

لچڪدار شيءِ
لچڪدار شيءِ
html
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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).

لچڪدار شيءِ
لچڪدار شيءِ
لچڪدار شيءِ
لچڪدار شيءِ
لچڪدار شيءِ
لچڪدار شيءِ
لچڪدار شيءِ
لچڪدار شيءِ
لچڪدار شيءِ
html
<div class="d-flex mb-3">
  <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 mb-3">
  <div class="me-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 mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

ترتيب ڏيڻ واري شين سان

عمودي طور تي ھڪڙي لچڪدار شيءِ کي ھڪڙي ڪنٽينر جي مٿئين يا ھيٺان ڏانھن ھلايو align-items، flex-direction: column, ۽ margin-top: autoيا margin-bottom: auto.

لچڪدار شيءِ
لچڪدار شيءِ
لچڪدار شيءِ
لچڪدار شيءِ
لچڪدار شيءِ
لچڪدار شيءِ
html
<div class="d-flex align-items-start flex-column mb-3" 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 mb-3" 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
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-wrap-reverse

آرڊر

مٽايو بصري ترتيب جي مخصوص فليڪس شين جي هٿرادو orderافاديت سان. اسان صرف اختيار ڏيون ٿا ھڪڙي شيون ٺاهڻ لاءِ پھريون يا آخري، ۽ گڏو گڏ ڊوم آرڊر استعمال ڪرڻ لاءِ ري سيٽ. جيئن ته order0 کان 5 تائين ڪا به عددي قيمت وٺندي، ڪنهن به اضافي قدر جي ضرورت لاءِ ڪسٽم CSS شامل ڪريو.

پهريون فليڪس شيون
ٻيو لچڪدار شيءِ
ٽيون لچڪدار شيءِ
html
<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-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-between
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-between
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-between
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-between
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-between
  • .align-content-xl-around
  • .align-content-xl-stretch
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

ميڊيا اعتراض

بوٽ اسٽريپ 4 مان ميڊيا اعتراض جزو کي نقل ڪرڻ لاءِ ڏسي رهيا آهيو ؟ ان کي بنا ڪنهن وقت ۾ ڪجھ لچڪدار افاديتن سان ٻيهر ٺاهيو جيڪي اڳي کان به وڌيڪ لچڪ ۽ ڪسٽمائيزيشن جي اجازت ڏين ٿيون.

Placeholder Image
هي ميڊيا جزو مان ڪجهه مواد آهي. توهان هن کي ڪنهن به مواد سان تبديل ڪري سگهو ٿا ۽ ضرورت مطابق ان کي ترتيب ڏيو.
html
<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>

۽ چئو ته توهان تصوير جي اڳيان مواد کي عمودي مرڪز ڪرڻ چاهيو ٿا:

Placeholder Image
هي ميڊيا جزو مان ڪجهه مواد آهي. توهان هن کي ڪنهن به مواد سان تبديل ڪري سگهو ٿا ۽ ضرورت مطابق ان کي ترتيب ڏيو.
html
<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
    ),
    "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,
      ),
    ),