मोड़ना
उत्तरदायी फ्लेक्सबॉक्स उपयोगिताएं दे पूरे सूट कन्नै ग्रिड स्तंभें, नेविगेशन, घटकें, ते होर मते सारें दे लेआउट, संरेखण, ते आकार गी जल्दी प्रबंधत करो। होर जटिल कार्यान्वयनें लेई, कस्टम सीएसएस जरूरी होई सकदा ऐ।
फ्लेक्स व्यवहारें गी सक्षम करो
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-*
जरूरत पौने पर इक फ्लेक्स आइटम दी सिकुड़ने दी क्षमता गी टॉगल करने लेई उपयोगिताएं दा उपयोग करो . हेठ दित्ते गेदे उदाहरन च, कन्नै दूई फ्लेक्स आइटम .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
अस सिर्फ इक आइटम गी पैह् ले जां आखरी बनाने दे विकल्प उपलब्ध करोआने आं, ते कन्नै गै DOM आर्डर दा इस्तेमाल करने आस्तै इक रीसेट बी उपलब्ध करोआने आं। जिऱयां order
0 थमां 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
बदलदे न।order
order: -1
order: 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
कन्नै संरेखित करने लेई फ्लेक्सबॉक्स कंटेनरें पर उपयोगिताएं दा उपयोग करो । ( ब्राउज़र डिफ़ॉल्ट), , , , , जां . इनें उपयोगिताएं गी प्रदर्शत करने आस्तै, असें फ्लेक्स आइटमें दी गिनतरी गी लागू कीता ऐ ते बधाया ऐ।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
.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,
),
),