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