فليڪس

فوري طور تي ترتيب ڏيڻ، ترتيب ڏيڻ، ۽ گرڊ ڪالمن جي ماپ، نيويگيشن، اجزاء، ۽ وڌيڪ جوابي فلڪس باڪس يوٽيلٽيز جي مڪمل سوٽ سان. وڌيڪ پيچيده عملن لاء، ڪسٽم 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سامهون واري پاسي کان افقي طرف شروع ڪرڻ لاءِ.

<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

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

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

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

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-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

ڀريو

طبقو استعمال ڪريو .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افاديت سان. اسان صرف اختيار ڏيون ٿا ھڪڙي شيون ٺاهڻ لاءِ پھريون يا آخري، ۽ گڏو گڏ ڊوم آرڊر استعمال ڪرڻ لاءِ ري سيٽ. جيئن ته 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-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