मोड़ना
प्रतिक्रियाशील फ्लेक्सबॉक्स उपयोगिताओं के पूर्ण सूट के साथ ग्रिड कॉलम, नेविगेशन, घटकों, और अधिक के लेआउट, संरेखण और आकार को त्वरित रूप से प्रबंधित करें। अधिक जटिल कार्यान्वयन के लिए, कस्टम सीएसएस आवश्यक हो सकता है।
display
फ्लेक्सबॉक्स कंटेनर बनाने और सीधे बच्चों के तत्वों को फ्लेक्स आइटम में बदलने के लिए उपयोगिताओं को लागू करें । फ्लेक्स कंटेनर और आइटम अतिरिक्त फ्लेक्स गुणों के साथ आगे संशोधित करने में सक्षम हैं।
<div class="d-flex p-2">I'm a flexbox container!</div>
<div class="d-inline-flex p-2">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">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
.flex-column
एक लंबवत दिशा निर्धारित करने के लिए, या .flex-column-reverse
विपरीत दिशा से लंबवत दिशा शुरू करने के लिए उपयोग करें ।
<div class="d-flex flex-column">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">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
(एक्स-अक्ष को प्रारंभ करने के लिए, वाई-अक्ष अगर 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
(शुरू करने के लिए वाई-अक्ष, एक्स-अक्ष अगर 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
व्यक्तिगत रूप से क्रॉस अक्ष पर उनके संरेखण को बदलने के लिए करें (शुरू करने के लिए वाई-अक्ष, एक्स-अक्ष अगर 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
जब आप फ्लेक्स संरेखण को ऑटो मार्जिन के साथ मिलाते हैं तो फ्लेक्सबॉक्स कुछ बहुत बढ़िया काम कर सकता है। ऑटो मार्जिन के माध्यम से फ्लेक्स आइटम को नियंत्रित करने के तीन उदाहरण नीचे दिखाए गए हैं: डिफ़ॉल्ट (कोई ऑटो मार्जिन नहीं), दो आइटम को दाईं ओर .mr-auto
धकेलना ( ), और दो आइटम को बाईं ओर धकेलना ( .ml-auto
)।
दुर्भाग्य से, IE10 और IE11 उन फ्लेक्स आइटम पर ऑटो मार्जिन का ठीक से समर्थन नहीं करते हैं जिनके माता-पिता के पास एक गैर-डिफ़ॉल्ट justify-content
मान है। अधिक जानकारी के लिए यह स्टैक ओवरफ्लो उत्तर देखें।
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-auto p-2">Flex item</div>
</div>
align-items
, flex-direction: column
, और margin-top: auto
या को मिलाकर एक फ्लेक्स आइटम को कंटेनर के ऊपर या नीचे लंबवत रूप से ले जाएं margin-bottom: auto
।
<div class="d-flex align-items-start flex-column" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column" style="height: 200px;">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="mt-auto p-2">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
हम केवल आइटम को पहले या अंतिम बनाने के विकल्प प्रदान करते हैं, साथ ही DOM ऑर्डर का उपयोग करने के लिए रीसेट भी करते हैं। जैसा कि order
कोई पूर्णांक मान लेता है (उदाहरण के लिए, 5
), आवश्यक किसी भी अतिरिक्त मान के लिए कस्टम सीएसएस जोड़ें।
<div class="d-flex flex-nowrap">
<div class="order-3 p-2">First flex item</div>
<div class="order-2 p-2">Second flex item</div>
<div class="order-1 p-2">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
संरेखित करने के लिए फ्लेक्सबॉक्स कंटेनरों पर उपयोगिताओं का उपयोग करें । (ब्राउज़र डिफ़ॉल्ट), , , , , या में से चुनें । इन उपयोगिताओं को प्रदर्शित करने के लिए, हमने फ्लेक्स आइटमों की संख्या को लागू और बढ़ाया है।start
end
center
between
around
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-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