Source

नम्

प्रतिक्रियाशील-flexbox-उपयोगितायाः पूर्ण-समूहेन सह ग्रिड्-स्तम्भानां, नेविगेशनस्य, घटकानां, इत्यादीनां विन्यासं, संरेखणं, आकारीकरणं च शीघ्रं प्रबन्धयन्तु अधिकजटिलकार्यन्वयनार्थं कस्टम् CSS आवश्यकं भवितुम् अर्हति ।

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

displayएकं flexbox-पात्रं निर्मातुं तथा च प्रत्यक्ष-बाल-तत्त्वानि flex-वस्तूनि परिवर्तयितुं उपयोगितानि प्रयोजयन्तु । फ्लेक्स पात्राणि, वस्तूनि च अतिरिक्त-फ्लेक्स-गुणैः सह अधिकं परिवर्तयितुं समर्थाः सन्ति ।

अहं flexbox पात्रम् अस्मि!
<div class="d-flex p-2">I'm a flexbox container!</div>
अहं एकः इनलाइन फ्लेक्सबॉक्स पात्रः अस्मि!
<div class="d-inline-flex p-2">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विपरीतपक्षतः क्षैतिजदिशां आरभ्यतुं उपयुज्यताम् ।

फ्लेक्स मद 1
फ्लेक्स मद 2
फ्लेक्स मद 3
फ्लेक्स मद 1
फ्लेक्स मद 2
फ्लेक्स मद 3
<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

ऊर्ध्वाधरदिशां .flex-columnसेट् कर्तुं, अथवा .flex-column-reverseविपरीतपक्षतः ऊर्ध्वाधरदिशां आरभ्यतुं उपयुज्यताम् ।

फ्लेक्स मद 1
फ्लेक्स मद 2
फ्लेक्स मद 3
फ्लेक्स मद 1
फ्लेक्स मद 2
फ्लेक्स मद 3
<div class="d-flex flex-column">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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-वस्तूनाम् संरेखणं परिवर्तयितुं flexbox-पात्रेषु उपयोगितानां उपयोगं कुर्वन्तु 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

आइटम्स् संरेखित करें

क्रॉस् अक्षे फ्लेक्स-वस्तूनाम् संरेखणं परिवर्तयितुं flexbox-पात्रेषु उपयोगितानां उपयोगं कुर्वन्तु 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

आत्म संरेखित करें

क्रॉस अक्ष पर व्यक्तिगत रूप से उनके संरेखण को बदलने के लिए flexbox आइटम पर उपयोगिताओं का उपयोग 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

ऑटो मार्जिन

Flexbox किञ्चित् सुन्दरं भयानकं कार्यं कर्तुं शक्नोति यदा भवान् auto margins इत्यनेन सह flex alignments इत्यस्य मिश्रणं करोति। अधः स्वतः मार्जिनद्वारा फ्लेक्स-वस्तूनाम् नियन्त्रणस्य त्रीणि उदाहरणानि दर्शितानि सन्ति: पूर्वनिर्धारितं (स्वयं मार्जिनं नास्ति), द्वौ द्रव्यौ दक्षिणतः ( .mr-auto) धक्कायित्वा, द्वौ द्रव्यौ वामतः धक्कायन्ते ( .ml-auto) ।

दुर्भाग्यवशं, IE10 तथा IE11 flex आइटम् मध्ये auto margins सम्यक् समर्थनं न कुर्वन्ति येषां मातापितृणां गैर-पूर्वनिर्धारितमूल्यं justify-contentभवति । अधिकविवरणार्थं एतत् StackOverflow उत्तरं पश्यन्तु ।

फ्लेक्स आइटम
फ्लेक्स आइटम
फ्लेक्स आइटम
फ्लेक्स आइटम
फ्लेक्स आइटम
फ्लेक्स आइटम
फ्लेक्स आइटम
फ्लेक्स आइटम
फ्लेक्स आइटम
<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

संरेख-वस्तुभिः सह

align-itemsएकं फ्लेक्स द्रव्यं , flex-direction: column, तथा margin-top: autoवा मिश्रयित्वा पात्रस्य उपरि अधः वा लम्बवत् चालयन्तु margin-bottom: auto

फ्लेक्स आइटम
फ्लेक्स आइटम
फ्लेक्स आइटम
फ्लेक्स आइटम
फ्लेक्स आइटम
फ्लेक्स आइटम
<div class="d-flex align-items-start flex-column" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

उपवे

फ्लेक्स-वस्तूनि कथं फ्लेक्स-पात्रे वेष्टयन्ति इति परिवर्तयन्तु । सर्वथा न wrapping (ब्राउजर् पूर्वनिर्धारितम्) with .flex-nowrap, wrapping with .flex-wrap, अथवा reverse wrapping with इत्यस्मात् चयनं कुर्वन्तु .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">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">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 संरेखयितुं flexbox-पात्रेषु उपयोगितानां उपयोगं कुर्वन्तु । ( ब्राउजर पूर्वनिर्धारित), , , , , अथवा . एतानि उपयोगितानि प्रदर्शयितुं वयं फ्लेक्स-वस्तूनाम् संख्यां प्रवर्तयित्वा वर्धितवन्तः ।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