फ्लेक्स

फ्लेक्स व्यवहार सक्षम गर्नुहोस्

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मुख्य अक्षमा फ्लेक्स वस्तुहरूको पङ्क्तिबद्धता परिवर्तन गर्न flexbox कन्टेनरहरूमा उपयोगिताहरू प्रयोग गर्नुहोस् (सुरु गर्न x-axis, y-axis if 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क्रस अक्षमा फ्लेक्स वस्तुहरूको पङ्क्तिबद्धता परिवर्तन गर्न flexbox कन्टेनरहरूमा उपयोगिताहरू प्रयोग गर्नुहोस् (सुरु गर्न y-axis, x-axis if 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 अर्डर प्रयोग गर्न रिसेट। order0 देखि 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: -1order: 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

मिडिया वस्तु

Bootstrap 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>

सास

उपयोगिता API

Flexbox उपयोगिताहरू हाम्रो उपयोगिता API मा घोषणा गरिएको छ scss/_utilities.scss। उपयोगिता API कसरी प्रयोग गर्ने जान्नुहोस्।

    "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,
      ),
    ),