मोड़ल

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

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(शुरुआत करे खातिर 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(शुरुआत करे खातिर 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(शुरुआत करे खातिर 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

ऑटो मार्जिन के बा

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

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