लचीला

उत्तरदायी फ्लेक्सबॉक्स उपयोगिताक कें पूरा सूट कें साथ ग्रिड कॉलम, नेविगेशन, घटक, आ बेसि कें लेआउट, संरेखण, आ आकार कें जल्दी सं प्रबंधित करूं. अधिक जटिल कार्यान्वयन कें लेल, कस्टम सीएसएस आवश्यक भ सकय छै.

फ्लेक्स व्यवहार सक्षम करू

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

दिशा

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

सामग्री के जायज ठहराउ

मुख्य अक्ष पर फ्लेक्स आइटम कें संरेखण बदलय कें लेल फ्लेक्सबॉक्स कंटेनर पर उपयोगिताक कें उपयोग करूं justify-content(शुरुआत करय कें लेल x-अक्ष, y-अक्ष यदि 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(शुरुआत करय कें लेल 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-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

भरु

भाई-बहिन तत्वक कें एकटा श्रृंखला पर वर्ग कें उपयोग करूं ताकि .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-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

ऑटो मार्जिन

फ्लेक्सबॉक्स किछु सुंदर भयानक काज क सकैत अछि जखन अहाँ ऑटो मार्जिन के संग फ्लेक्स संरेखण मिलाबैत छी । ऑटो मार्जिन के माध्यम स॑ फ्लेक्स आइटम क॑ नियंत्रित करै के तीन उदाहरण नीचें दिखालऽ गेलऽ छै: डिफ़ॉल्ट (कोय ऑटो मार्जिन नै), दू आइटम क॑ दाहिना तरफ .mr-autoधकेलना ( ), आरू दू आइटम क॑ बायां तरफ धकेलना ( .ml-auto) ।

दुर्भाग्यवश, IE10 आ IE11 फ्लेक्स आइटम पर ऑटो मार्जिन कें सही ढंग सं समर्थन नहि करयत छै जकर पैरेंट कें गैर-डिफ़ॉल्ट justify-contentमान छै. अधिक जानकारी के लेल ई StackOverflow उत्तर देखू .

<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="mr-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="ml-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

आदेश

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