जंव

फ्लेक्स वर्तनां सक्षम करात

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मुखेल अक्षाचेर फ्लेक्स वस्तूंची संरेखण बदलपाक flexbox कंटेनरांचेर उपयुक्तताय वापरात (सुरू करपाक x-अक्ष, y-अक्ष जर 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

वस्तू एके वळीन दवरात

align-itemsक्रॉस अक्षाचेर फ्लेक्स वस्तूंची संरेखण बदलपाक flexbox कंटेनरांचेर उपयुक्तताय वापरात (सुरवात करपाक y-अक्ष, x-अक्ष जर flex-direction: column). start, end, center, baseline, वा stretch(ब्राउझर मुलभूत) हातूंतल्यान निवडात .

<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-selfक्रॉस अक्षाचेर तांची संरेखण वैयक्तीकपणान बदलपाक flexbox वस्तूंचेर उपयुक्तताय वापरात (सुरवात करपाक y-अक्ष, x-अक्ष जर flex-direction: column). align-items: start, end, center, baseline, वा stretch(ब्राउझर मुलभूत) अशाच पर्यायां मदल्यान निवडात .

<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-*गरज पडल्यार फ्लेक्स आयटमाची आकुंचन करपाची तांक टॉगल करपाक उपयुक्तताय वापरात . सकयल दिल्ल्या उदाहरणांत, दुसरी फ्लेक्स आयटम with कडेन .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 ऑर्डर वापरपाक रीसेट दितात. 0 ते 5 मेरेन खंयचेंय पूर्णांक मोल घेता म्हणून order, गरज आशिल्ल्या खंयच्याय अतिरिक्त मोलाखातीर सानुकूल 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-lastorderorder: -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 संरेखित करपाक flexbox कंटेनरांचेर उपयुक्तताय वापरात . (ब्राउझर मुलभूत), , , , , वा हातूंतल्यान निवडात . ह्यो उपयुक्तताय दाखोवपा खातीर, आमी फ्लेक्स आयटमांची संख्या लागू केल्या आनी वाडयल्या.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>

सास

उपयुक्तताय एपीआय

Flexbox उपयुक्तताय आमच्या उपयुक्तताय API मदीं 2019 वर्सा जाहीर केल्यात scss/_utilities.scss. उपयुक्तताय एपीआय कसो वापरचो तें शिकात.

    "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,
      ),
    ),