फ्लेक्स

प्रतिसाद देणार्‍या फ्लेक्सबॉक्स युटिलिटीजच्या संपूर्ण संचसह ग्रिड स्तंभ, नेव्हिगेशन, घटक आणि बरेच काही यांचे लेआउट, संरेखन आणि आकारमान द्रुतपणे व्यवस्थापित करा. अधिक जटिल अंमलबजावणीसाठी, सानुकूल CSS आवश्यक असू शकते.

फ्लेक्स वर्तन सक्षम करा

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

justify-contentदुर्दैवाने, IE10 आणि IE11 फ्लेक्स आयटमवर ऑटो मार्जिनला योग्यरित्या समर्थन देत नाहीत ज्यांच्या पालकांचे मूल्य डीफॉल्ट नसलेले आहे . अधिक तपशीलांसाठी हे 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आम्ही फक्त प्रथम किंवा शेवटचा आयटम बनवण्यासाठी पर्याय देतो, तसेच DOM ऑर्डर वापरण्यासाठी रीसेट करतो. 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