मोड़ल

रिस्पांसिव फ्लेक्सबॉक्स यूटिलिटीज के पूरा सूट के साथ ग्रिड कॉलम, नेविगेशन, कंपोनेंट, आ अउरी बहुत कुछ के लेआउट, संरेखण, आ साइजिंग के जल्दी से प्रबंधित करीं। अउरी जटिल कार्यान्वयन खातिर, कस्टम सीएसएस जरूरी हो सके ला।

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

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

सामग्री के जायज ठहरावे के चाहीं

मुख्य अक्ष पर फ्लेक्स आइटम सभ के संरेखण बदले खातिर फ्लेक्सबॉक्स कंटेनर सभ पर उपयोगिता सभ के इस्तेमाल करीं justify-content(शुरुआत करे खातिर x-अक्ष, y-अक्ष अगर flex-direction: column)। start(ब्राउजर डिफ़ॉल्ट) से चुनीं , end, center, between, या 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

आइटम के संरेखित करीं

क्रॉस अक्ष पर फ्लेक्स आइटम सभ के संरेखण बदले खातिर फ्लेक्सबॉक्स कंटेनर सभ पर उपयोगिता सभ के इस्तेमाल करीं 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-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

भरल

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

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

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