Bootstrap 5 फ्लेक्स

फ्लेक्स बॉक्स

बूटस्ट्रैप 3 और बूटस्ट्रैप 4 & 5 के बीच सबसे बड़ा अंतर यह है कि बूटस्ट्रैप 5 अब फ्लेक्सबॉक्स का इस्तेमाल करता है और नहीं कि फ्लॉटिंग का इस्तेमाल करता है।

फ्लेक्सबॉक्स बॉक्स लाइउट मॉड्यूल, फ्लेक्सबॉक्स रिस्पोंसिव लाइउट संरचना को आसानी से डिजाइन कर सकते हैं, बिना फ्लॉटिंग या पोजिशन का इस्तेमाल करने की आवश्यकता है।

अगर आप फ्लेक्स को अनभिज्ञ हैं, तो हमारे CSS Flexbox ट्यूटोरियल में सीखें।

टिप्पणी:आईई9 और इससे पहले की संस्करण फ्लेक्सबॉक्स का समर्थन नहीं करते हैं。

टिप्पणी:अगर आप आईई8-9 का समर्थन करना चाहते हैं, तो बूटस्ट्रैप 3 का इस्तेमाल करें। यह सबसे स्थिर बूटस्ट्रैप संस्करण है, टीम अभी भी इसे महत्वपूर्ण त्रुटियों के सुधार और दस्तावेज़ बदलाव के लिए समर्थित कर रही है। लेकिन इसमें कोई नई कार्यक्षमता जोड़ी नहीं जाएगी。

उदाहरण

अगर आप फ्लेक्सबॉक्स कोर्टीनर का निर्माण करना चाहते हैं और अपने प्रत्यक्ष सहीबाओं को फ्लेक्स एण्डर के रूप में बदलना चाहते हैं, तो इस्तेमाल करें d-flex क्लास:}}

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">फ्लेक्स वस्तु 1</div>
  <div class="p-2 bg-warning">फ्लेक्स वस्तु 2</div>
  <div class="p-2 bg-primary">फ्लेक्स वस्तु 3</div>
</div>

स्वयं को प्रयोग करें

उदाहरण

अगर आप किसी लाइन इन फ्लेक्सबॉक्स कोर्टीनर का निर्माण करना चाहते हैं, तो इस्तेमाल करें d-inline-flex क्लास:}}

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">फ्लेक्स वस्तु 1</div>
  <div class="p-2 bg-warning">फ्लेक्स वस्तु 2</div>
  <div class="p-2 bg-primary">फ्लेक्स वस्तु 3</div>
</div>

स्वयं को प्रयोग करें

सीधे दिशा

कृपया इस्तेमाल करें .flex-row सीधे (साथ) दिखाया जाने वाले flex प्रभाव। यह मूल विन्यास है।

सूचना:उपयोग करें .flex-row-reverse सीधे दिशा में दायाँ ओर अनुरूपी कर सकते हैं:

उदाहरण

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">फ्लेक्स वस्तु 1</div>
  <div class="p-2 bg-warning">फ्लेक्स वस्तु 2</div>
  <div class="p-2 bg-primary">फ्लेक्स वस्तु 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">फ्लेक्स वस्तु 1</div>
  <div class="p-2 bg-warning">फ्लेक्स वस्तु 2</div>
  <div class="p-2 bg-primary">फ्लेक्स वस्तु 3</div>
</div>

स्वयं को प्रयोग करें

ऊर्ध्व दिशा

कृपया इस्तेमाल करें .flex-column flex प्रभावों को ऊर्ध्व दिशा में दिखाया (एक के ऊपर एक), या इस्तेमाल करें .flex-column-reverse ऊपरी तल दिशा में पलट दिया

उदाहरण

<div class="d-flex flex-column">
  <div class="p-2 bg-info">फ्लेक्स वस्तु 1</div>
  <div class="p-2 bg-warning">फ्लेक्स वस्तु 2</div>
  <div class="p-2 bg-primary">फ्लेक्स वस्तु 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">फ्लेक्स वस्तु 1</div>
  <div class="p-2 bg-warning">फ्लेक्स वस्तु 2</div>
  <div class="p-2 bg-primary">फ्लेक्स वस्तु 3</div>
</div>

स्वयं को प्रयोग करें

सामग्री को जोड़ें

उपयोग करें .justify-content-* क्लास फ्लैक्स आयामों के अनुरूपी अनुवर्तन को बदल सकती हैं। वैध क्लास हैं:：

  • शुरू में（मूलभूत）
  • अंत में
  • मध्य में
  • बीच में
  • चारियों ओर

उदाहरण

<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>

स्वयं को प्रयोग करें

एक-समान आकार

फ्लेक्स वस्तु पर .flex-fill इन्हें बारीकी से एक-समान आकार में रख सकते हैं:

उदाहरण

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">फ्लैक्स आयाम 1</div>
  <div class="p-2 bg-warning flex-fill">फ्लैक्स आयाम 2</div>
  <div class="p-2 bg-primary flex-fill">फ्लैक्स आयाम 3</div>
</div>

स्वयं को प्रयोग करें

फैलाया

फ्लेक्स वस्तु पर .flex-grow-1 अतिरिक्त स्थान का उपयोग कर सकते हैं। नीचे दिए गए उदाहरण में पहले दो flex प्रभावों ने आवश्यक स्थान लिया है, और अंतिम प्रभाव ने शेष उपलब्ध स्थान लिया है:

उदाहरण

<div class="d-flex">
  <div class="p-2 bg-info">फ्लेक्स वस्तु 1</div>
  <div class="p-2 bg-warning">फ्लेक्स वस्तु 2</div>
  <div class="p-2 bg-primary flex-grow-1">फ्लेक्स वस्तु 3</div>
</div>

स्वयं को प्रयोग करें

सूचना:फ्लेक्स वस्तु पर .फ्लेक्स-संकुचन-1 जरूरत पड़ने पर खिंचने की क्षमता प्रदान करती है।

क्रमवारी

उपयोग करें .क्रम क्लासें विशेष फ्लेक्स वस्तु के दृश्यमान क्रम को बदल सकती है। वैध क्लासें 0 से 5 तक हैं, जिनमें सबसे कम संख्या उच्च प्राथमिकता है (order-1 order-2 से पहले दिखाया जाता है, इसी प्रकार ही):

उदाहरण

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">फ्लेक्स वस्तु 1</div>
  <div class="p-2 bg-warning order-2">फ्लेक्स वस्तु 2</div>
  <div class="p-2 bg-primary order-1">फ्लेक्स वस्तु 3</div>
</div>

स्वयं को प्रयोग करें

स्वचालित बाह्य-कोष्ठ

उपयोग करें .दाएं-तरफ-खिंचने-वालाया .बाएं-तरफ-खिंचने-वाला（वस्तु को बाएं तरफ खिंचने के लिए）（कोष्ठ में अपने आप निर्वहन करने वाली वस्तु को जोड़ने के लिए）

उदाहरण

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">फ्लेक्स वस्तु 1</div>
  <div class="p-2 bg-warning">फ्लेक्स वस्तु 2</div>
  <div class="p-2 bg-primary">फ्लेक्स वस्तु 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">फ्लेक्स वस्तु 1</div>
  <div class="p-2 bg-warning">फ्लेक्स वस्तु 2</div>
  <div class="p-2 me-auto bg-primary">फ्लेक्स वस्तु 3</div>
</div>

स्वयं को प्रयोग करें

वर्तन करें

द्वारा .अनुवांशित-बिना-विलोपक्षीय（मूलभूत）、.अनुवांशित या .अनुवांशित-विलोपक्षीयफ्लेक्स वस्तुओं को फ्लेक्स वैयक्तिक के अंदर कैसे विभाजित होने देने को नियंत्रित करती है。

उदाहरण

<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>

स्वयं को प्रयोग करें

सामग्री को जोड़ें

कृपया इस्तेमाल करें .अनुवांशित-* क्लास विकल्पीय वस्तुओं की ऊर्ध्व निर्धारण के तरीके को नियंत्रित करती है। वैध क्लासेंः

  • .अनुवांशित-शुरुआत（मूलभूत）
  • .अनुवांशित-अंत
  • .अनुवांशित-सामान्य
  • .आसान-बीच
  • .आसान-आसपास
  • .आसान-सामान्य

टिप्पणी:ये क्लासें एकल पंक्ति अलसता वस्तु पर प्रभाव नहीं डालती हैं。

नीचे दिए गए बटन पर क्लिक करके, इस्तेमाल फ़ैसले में अलसता वस्तु के ऊर्ध्व आसानी के तरीके को बदलकर पांच क्लासों के अंतर को देखें:

उदाहरण

<div class="d-flex flex-wrap align-content-start">..</div>
<div class="d-flex flex-wrap align-content-end">..</div>
<div class="d-flex flex-wrap align-content-center">..</div>
<div class="d-flex flex-wrap align-content-around">..</div>
<div class="d-flex flex-wrap align-content-stretch">..</div>

स्वयं को प्रयोग करें

आइटम्स को जोड़ें

कृपया इस्तेमाल करें .आसान-आधार-* क्लास नियंत्रणएकल पंक्तिअलसता वस्तु के ऊर्ध्व आसानी के तरीके। वैध क्लासें हैं:

  • .आसान-शुरुआत
  • .आसान-अंत
  • .आसान-मध्य
  • .आसान-आधार
  • .आसान-सामान्य（मूलभूत）

नीचे दिए गए बटन पर क्लिक करके पांच क्लासों के बीच का अंतर देखें:

उदाहरण

<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>

स्वयं को प्रयोग करें

स्व-आसान

कृपया इस्तेमाल करें .आसान-सामान्य-* क्लास नियंत्रणअलसता वस्तु निर्दिष्ट करेंके ऊर्ध्व आसानी के तरीके। वैध क्लासें हैं:

  • .आसान-शुरुआत
  • .आसान-अंत
  • .आसान-मध्य
  • .आसान-आधार
  • .आसान-सामान्य（मूलभूत）

नीचे दिए गए बटन पर क्लिक करके पांचों क्लासों के बीच अंतर को देखें:

उदाहरण

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border align-self-start">Flex item 2</div>
  <div class="p-2 border">Flex item 3</div>
</div>

स्वयं को प्रयोग करें

प्रतिक्रियाशील फ्लेक्स क्लास

सभी फ्लेक्स क्लासों में अतिरिक्त प्रतिक्रियाशील क्लास हैं जो विशिष्ट स्क्रीन आकार पर विशिष्ट फ्लेक्स क्लास को सेट करने में आसानी प्रदान करते हैं

* संकेतक को sm, md, lg, xl या xxl में प्रतिस्थापित कर सकते हैं जो क्रमश: छोटा, मध्यम, बड़ा, बड़ा और बहुत बड़ा स्क्रीन को प्रतिनिधित्व करते हैं

विशिष्ट फ्लेक्स क्लास को खोजें ..

क्लास वर्णन उदाहरण
अनुबंधीय बॉक्स
.d-*-flex विभिन्न स्क्रीनों के लिए अनुबंधीय बॉक्स बनाएं सिर्फ प्रयोग करें
.d-*-inline-flex विभिन्न स्क्रीनों के लिए अनुबंधीय बॉक्स शीर्षक को बनाएं सिर्फ प्रयोग करें
दिशा
.flex-*-row विभिन्न स्क्रीनों पर अनुबंधीय वस्तुओं को आड़े रूप से दिखाना सिर्फ प्रयोग करें
.flex-*-row-reverse विभिन्न स्क्रीनों पर अनुबंधीय वस्तुओं को आड़े रूप से दाएँ समानांतर दिखाना सिर्फ प्रयोग करें
.flex-*-column विभिन्न स्क्रीनों पर अनुबंधीय वस्तुओं को ऊर्ध्व रूप से दिखाना सिर्फ प्रयोग करें
.flex-*-column-reverse विभिन्न स्क्रीनों पर विपरीत क्रम में अनुबंधीय वस्तुओं को ऊर्ध्व रूप से दिखाना सिर्फ प्रयोग करें
समान लाइन की सामग्री
.justify-content-*-start विभिन्न स्क्रीनों पर शुरू (बाएँ समानांतर) से अनुबंधीय वस्तुओं को दिखाना सिर्फ प्रयोग करें
.justify-content-*-end विभिन्न स्क्रीनों के अंत (दाएँ समानांतर) पर अनुबंधीय वस्तुओं को दिखाना सिर्फ प्रयोग करें
.justify-content-*-center विभिन्न स्क्रीनों के फ्लेक्स के भीतरी केंद्र पर अनुबंधीय वस्तुओं को दिखाना सिर्फ प्रयोग करें
.justify-content-*-between विभिन्न स्क्रीनों पर अनुबंधीय वस्तुओं को समान रूप से दिखाना सिर्फ प्रयोग करें
.justify-content-*-around विभिन्न स्क्रीनों पर अनुबंधीय वस्तुओं को 'चारों ओर' दिखाना सिर्फ प्रयोग करें
भरना / समान चौड़ाई
.flex-*-fill बाध्यकारी रूप से अनुबंधीय वस्तुओं को विभिन्न स्क्रीनों पर चौड़ाई में बराबर रखना सिर्फ प्रयोग करें
विस्तारित करना
.flex-*-grow-0 वस्तुओं को विभिन्न स्क्रीनों पर विस्तारित नहीं करने दें
.flex-*-grow-1 विभिन्न स्क्रीनों पर वस्तुओं को विस्तारित करने के लिए
सामंजस्य देना
.flex-*-shrink-0 आइटम्स को विभिन्न स्क्रीनों पर संकुचित न करें।
.flex-*-shrink-1 आइटम्स को विभिन्न स्क्रीनों पर संकुचित करें。
क्रमवारी
.order-*-0-12 छोटे स्क्रीनों पर 0 से 12 तक क्रमवारी को बदलें。 सिर्फ प्रयोग करें
वर्तन करें
.flex-*-nowrap विभिन्न स्क्रीनों पर आइटम्स को नहीं वर्तन करें。 सिर्फ प्रयोग करें
.flex-*-wrap विभिन्न स्क्रीनों पर आइटम्स को वर्तन करें。 सिर्फ प्रयोग करें
.flex-*-wrap-reverse विभिन्न स्क्रीनों पर आइटम्स के वर्तन को उलटें。 सिर्फ प्रयोग करें
सामग्री को जोड़ें
.align-content-*-start विभिन्न स्क्रीनों पर शुरू से जोड़ें。 सिर्फ प्रयोग करें
.align-content-*-end विभिन्न स्क्रीनों के अंत के पास आइटम्स को जोड़ें。 सिर्फ प्रयोग करें
.align-content-*-center विभिन्न स्क्रीनों के केंद्र पर आइटम्स को जोड़ें。 सिर्फ प्रयोग करें
.align-content-*-around विभिन्न स्क्रीनों के आसपास आइटम्स को जोड़ें。 सिर्फ प्रयोग करें
.align-content-*-stretch विभिन्न स्क्रीनों पर आइटम्स को फैलाएं。 सिर्फ प्रयोग करें
आइटम्स को जोड़ें
.align-items-*-start विभिन्न स्क्रीनों पर शुरू से जोड़ें。 सिर्फ प्रयोग करें
.align-items-*-end विभिन्न स्क्रीनों के अंत के पास एकल पंक्ति के आइटम्स को जोड़ें。 सिर्फ प्रयोग करें
.align-items-*-center विभिन्न स्क्रीनों के केंद्र पर एकल पंक्ति के आइटम्स को जोड़ें。 सिर्फ प्रयोग करें
.align-items-*-baseline विभिन्न स्क्रीनों के बेसलाइन पर एकल पंक्ति के आइटम्स को जोड़ें。 सिर्फ प्रयोग करें
.align-items-*-stretch विभिन्न स्क्रीनों पर एकल पंक्ति के आइटम्स को फैलाएं。 सिर्फ प्रयोग करें
स्वयं को जोड़ें
.align-self-*-start विभिन्न स्क्रीनों पर शुरू से जोड़ें。 सिर्फ प्रयोग करें
.align-self-*-end विभिन्न स्क्रीनों के अंत के पास फ्लेक्सबॉक्स आइटम्स को जोड़ें。 सिर्फ प्रयोग करें
.align-self-*-center विभिन्न स्क्रीनों के केंद्र पर फ्लेक्सबॉक्स आइटम्स को जोड़ें。 सिर्फ प्रयोग करें
.align-self-*-baseline विभिन्न स्क्रीनों के बेसलाइन पर फ्लेक्सबॉक्स आइटम्स को जोड़ें。 सिर्फ प्रयोग करें
.align-self-*-stretch विभिन्न स्क्रीनों पर फ्लेक्सबॉक्स आइटम्स को फैलाएं。 सिर्फ प्रयोग करें