लचीला
उत्तरदायी फ्लेक्सबॉक्स उपयोगिताक कें पूरा सूट कें साथ ग्रिड कॉलम, नेविगेशन, घटक, आ बेसि कें लेआउट, संरेखण, आ आकार कें जल्दी सं प्रबंधित करूं. अधिक जटिल कार्यान्वयन कें लेल, कस्टम सीएसएस आवश्यक भ सकय छै.
फ्लेक्स व्यवहार सक्षम करू
display
एकटा फ्लेक्सबॉक्स कंटेनर बनावा कें लेल उपयोगिताअक कें लागू करूं आ डायरेक्ट चिल्ड्रेन तत्वक कें फ्लेक्स आइटम मे बदलूं. फ्लेक्स कंटेनर आ आइटम अतिरिक्त फ्लेक्स गुणक कें साथ आगू संशोधित करय मे सक्षम छै.
प्रतिक्रियाशील भिन्नता सेहो अछि .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
विपरीत पक्ष सँ क्षैतिज दिशा शुरू करबाक लेल प्रयोग करू .
.flex-column
ऊर्ध्वाधर दिशा सेट करय लेल, या .flex-column-reverse
विपरीत तरफ सं ऊर्ध्वाधर दिशा शुरू करय लेल प्रयोग करू .
के लेल प्रतिक्रियाशील भिन्नता सेहो मौजूद अछि 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
.
के लेल प्रतिक्रियाशील भिन्नता सेहो मौजूद अछि 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
(ब्राउजर पूर्वनिर्धारित) सँ चुनू .
के लेल प्रतिक्रियाशील भिन्नता सेहो मौजूद अछि 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
(ब्राउजर पूर्वनिर्धारित) क समान विकल्प मे सँ चुनू .
के लेल प्रतिक्रियाशील भिन्नता सेहो मौजूद अछि 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
ओकरा ओकर सामग्री कें बराबर चौड़ाई मे मजबूर कैल जा सकय (या समान चौड़ाई अगर ओकर सामग्री ओकर सीमा-बॉक्स सं बेसि नहि भ जायत छै) जखन कि सबटा उपलब्ध क्षैतिज स्थान लेतय.
के लेल प्रतिक्रियाशील भिन्नता सेहो मौजूद अछि flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
बढ़ब आ सिकुड़ब
.flex-grow-*
उपलब्ध स्थान कें भरय कें लेल कोनों फ्लेक्स आइटम कें बढ़य कें क्षमता कें टॉगल करय कें लेल उपयोगिताक कें उपयोग करूं . नीचे देलऽ गेलऽ उदाहरण म॑ .flex-grow-1
तत्व सब उपलब्ध जगह के उपयोग करै छै जेकरा वू करी सकै छै, जबकि शेष दू फ्लेक्स आइटम क॑ अपनऽ आवश्यक जगह के अनुमति दै छै ।
.flex-shrink-*
यदि आवश्यक होय त कोनों फ्लेक्स आइटम कें सिकुड़य कें क्षमता कें टॉगल करय कें लेल उपयोगिताक कें उपयोग करूं . नीचा देल गेल उदाहरण मे, दोसर फ्लेक्स आइटम कें साथ .flex-shrink-1
अपन सामग्री कें एकटा नव लाइन मे लपेटय कें लेल मजबूर छै, “सिकुड़नाय” कें साथ पिछला फ्लेक्स आइटम कें लेल बेसि जगह कें अनुमति देवय कें लेल .w-100
.
प्रतिक्रियाशील भिन्नता सेहो अछि 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 उत्तर देखू .
संरेखण-आइटम के साथ
एकटा फ्लेक्स आइटम कें लंबवत रूप सं align-items
, flex-direction: column
, आ margin-top: auto
या मिला क कोनों कंटेनर कें ऊपर या निचला भाग मे ल जाऊं margin-bottom: auto
.
मोड़नाइ
बदलू जे फ्लेक्स आइटम फ्लेक्स कंटेनर मे कोना लपेटैत अछि। बिल्कुल कोनो रैपिंग नहि (ब्राउज़र डिफ़ॉल्ट) मे सँ चुनू .flex-nowrap
, सँ रैपिंग .flex-wrap
, अथवा रिवर्स रैपिंग सँ चुनू .flex-wrap-reverse
.
के लेल प्रतिक्रियाशील भिन्नता सेहो मौजूद अछि 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 जोड़ू.
के लेल प्रतिक्रियाशील भिन्नता सेहो मौजूद अछि 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
हेड अप! एहि गुणक फ्लेक्स आइटम क एकल पंक्ति पर कोनो प्रभाव नहि पड़ैत अछि.
के लेल प्रतिक्रियाशील भिन्नता सेहो मौजूद अछि 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