मोड़ना

फ्लेक्स व्यवहार सक्षम करें

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(एक्स-अक्ष को प्रारंभ करने के लिए, वाई-अक्ष अगर 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(शुरू करने के लिए वाई-अक्ष, एक्स-अक्ष अगर 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व्यक्तिगत रूप से क्रॉस अक्ष पर उनके संरेखण को बदलने के लिए करें (शुरू करने के लिए वाई-अक्ष, एक्स-अक्ष अगर 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-*यदि आवश्यक हो तो किसी फ्लेक्स आइटम की सिकुड़ने की क्षमता को चालू करने के लिए उपयोगिताओं का उपयोग करें । नीचे दिए गए उदाहरण में, दूसरे फ्लेक्स आइटम को .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

ऑटो मार्जिन

जब आप फ्लेक्स संरेखण को ऑटो मार्जिन के साथ मिलाते हैं तो फ्लेक्सबॉक्स कुछ बहुत बढ़िया काम कर सकता है। ऑटो मार्जिन के माध्यम से फ्लेक्स आइटम को नियंत्रित करने के तीन उदाहरण नीचे दिखाए गए हैं: डिफ़ॉल्ट (कोई ऑटो मार्जिन नहीं), दो आइटम को दाईं ओर .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>

सास

यूटिलिटीज एपीआई

फ्लेक्सबॉक्स उपयोगिताओं को हमारी उपयोगिताओं एपीआई में 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,
      ),
    ),