CSS फ्लेक्सबॉक्स

1
2
3
4
5
6
7
8

स्वयं आयात करें

CSS Flexbox लेयआउट मॉड्यूल

Flexbox लेयआउट मॉड्यूल (लॉन्च) से पहले, उपलब्ध लेयआउट मोड्स में निम्नलिखित चार हैं:

  • ब्लॉक (Block), वेबपेज में किसी भाग (सेक्शन) के लिए
  • इनलाइन (Inline), लिखित टेक्स्ट के लिए
  • तालिका, दो-आयामी तालिका डाटा के लिए
  • पोजिशनिंग, एलीमेंट के स्पष्ट स्थान के लिए

फ्लेक्स बॉक्स लेयआउट मॉड्यूल, जो लचीले प्रतिक्रियाशील लेयआउट संरचना डिजाइन करने में आसानी देता है, बिना फ्लॉटिंग या पोजिशनिंग का उपयोग किए。

ब्राउज़र समर्थन

सभी आधुनिक ब्राउज़रों में समर्थन flexbox गुण

29.0 11.0 22.0 10 48

Flexbox एलीमेंट

यदि आप Flexbox मॉडल का उपयोग शुरू करना चाहते हैं, तो आपको पहले Flex भारी को परिभाषित करना होगा。

1
2
3

ऊपर वाले एलीमेंट तीन फ्लेक्स प्रभाग वाले flex कंटेनर (नीली क्षेत्र) को प्रदर्शित करते हैं।

उदाहरण

तीन फ्लेक्स प्रभाग वाला flex कंटेनर:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

स्वयं आयात करें

पितृ एलीमेंट (कंटेनर):

द्वारा: display गुण सेट किया जाता है: flexफ्लेक्स कंटेनर को लघुतरे बनाने के लिए गुण सेट किया जाता है:

1
2
3

उदाहरण

.flex-container {
  display: flex;
}

स्वयं आयात करें

यहाँ flex कंटेनर गुण हैं:

flex-direction एट्रिब्यूट

flex-direction गुण कंटेनर को किस दिशा में फ्लेक्स प्रभागों को ढालना है इसे निर्धारित करता है।

1
2
3

उदाहरण

column मूल्य फ्लेक्स प्रभागों को ऊर्ध्व ढालना (ऊपर से नीचे):

.flex-container {
  display: flex;
  flex-direction: column;
}

स्वयं आयात करें

उदाहरण

column-reverse मूल्य फ्लेक्स प्रभागों को ऊर्ध्व ढालना (नीचे से ऊपर):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

स्वयं आयात करें

उदाहरण

row मूल्य फ्लेक्स प्रभागों को स्तरीय ढालना (बाईं से दायं तरफ):

.flex-container {
  display: flex;
  flex-direction: row;
}

स्वयं आयात करें

उदाहरण

row-reverse मूल्य फ्लेक्स प्रभागों को स्तरीय ढालना (दायं से बाईं तरफ):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

स्वयं आयात करें

flex-wrap एट्रिब्यूट

flex-wrap गुण फ्लेक्स प्रभागों को लेने के लिए क्या करना चाहिए इसे निर्धारित करता है।

इस उदाहरण में 12 फ्लेक्स प्रभाग हैं, ताकि flex-wrap गुण को बेहतर दिखाया जा सके।

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

उदाहरण

wrap मूल्य इस प्रकार निर्धारित करता है कि आवश्यकता पड़े में, फ्लेक्स प्रभागों को लेना:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

स्वयं आयात करें

उदाहरण

nowrap मूल्य इस प्रकार निर्धारित करता है कि फ्लेक्स प्रभागों को नहीं लेना (मूल रूप):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

स्वयं आयात करें

उदाहरण

wrap-reverse मूल्य इस प्रकार निर्धारित करता है कि आवश्यकता पड़े में, फ्लेक्स प्रभाग विपरीत क्रम में लेने के लिए:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

स्वयं आयात करें

flex-flow एट्रिब्यूट

flex-flow गुण फ्लेक्स-direction और flex-wrap गुण को साथ-साथ सेट करने के लिए एक लघु गुण है।

उदाहरण

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

स्वयं आयात करें

justify-content एट्रिब्यूट

justify-content गुण फ्लेक्स प्रभागों को समायोजित करने के लिए उपयोग किया जाता है:

1
2
3

उदाहरण

center मूल्य फ्लेक्स प्रभागों को कंटेनर के मध्य में समायोजित करता है:

.flex-container {
  display: flex;
  justify-content: center;
}

स्वयं आयात करें

उदाहरण

flex-start मूल्य फ्लेक्स प्रभागों को कंटेनर के शुरू में समायोजित करता है (मूल रूप):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

स्वयं आयात करें

उदाहरण

flex-end मूल्य फ्लेक्स प्रभागों को कंटेनर के अंत में समायोजित करता है:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

स्वयं आयात करें

उदाहरण

space-around मूल्य दर्शाता है कि फ्लेक्स प्रभागों के शुरू, बीच और बाद में अंतराल वाला है:

.flex-container {
  display: flex;
  justify-content: space-around;
}

स्वयं आयात करें

उदाहरण

space-between मूल्य दर्शाता है कि फ्लेक्स प्रभागों के बीच अंतराल है:

.flex-container {
  display: flex;
  justify-content: space-between;
}

स्वयं आयात करें

align-items एट्रिब्यूट

align-items गुण फ्लेक्स प्रभागों को ऊर्ध्व तरफ समायोजित करने के लिए उपयोग किया जाता है।

1
2
3

इन उदाहरणों में, हम 200 पिक्सल ऊंचे कंटेनर का उपयोग करते हैं, ताकि align-items गुण को बेहतर दिखाया जा सके।

उदाहरण

center मान फ्लेक्स प्रोजेक्ट्स को कंटेनर के मध्य में आनुकूलित करता है:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

स्वयं आयात करें

उदाहरण

flex-start मान फ्लेक्स प्रोजेक्ट्स को कंटेनर के शुरू में आनुकूलित करता है:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

स्वयं आयात करें

उदाहरण

flex-end मान फ्लेक्स प्रोजेक्ट्स को कंटेनर के नीचे आनुकूलित करता है:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

स्वयं आयात करें

उदाहरण

stretch मान फ्लेक्स प्रोजेक्ट्स को कंटेनर को भरने के लिए बढ़ाता है (डिफ़ॉल्ट):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

स्वयं आयात करें

उदाहरण

baseline मान फ्लेक्स प्रोजेक्ट्स को बेस लाइन पर आनुकूलित करता है:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

स्वयं आयात करें

ध्यान:इस उदाहरण में, हम विभिन्न font-size का प्रयोग करके प्रोजेक्ट्स को टेक्स्ट बेस लाइन पर आनुकूलित करने का प्रदर्शन करेंगे:

1
2
3
4

align-content एट्रिब्यूट

align-content गुण फ्लेक्स लाइन को आनुकूलित करने के लिए प्रयोग किया जाता है।

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

इन उदाहरणों में, हम 600 पिक्सल ऊंचाई वाले कंटेनर का उपयोग करते हैं और flex-wrap गुण को wrap के रूप में सेट करते हैं, ताकि align-content गुण को बेहतर ढांचा दिखाया जा सके।

उदाहरण

space-between मान फ्लेक्स लाइन के बीच समान अंतराल दिखाता है:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

स्वयं आयात करें

उदाहरण

space-around मान फ्लेक्स लाइन को इसके पहले, बीच में और बाद में स्पेस के साथ दिखाता है:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

स्वयं आयात करें

उदाहरण

stretch मान फ्लेक्स लाइन को बढ़ाकर बाकी स्थान को ले लेता है (डिफ़ॉल्ट):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

स्वयं आयात करें

उदाहरण

center मान को कंटेनर के मध्य में दिखाने के लिए मध्य में दिखाया जाता है:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

स्वयं आयात करें

उदाहरण

flex-start मान को कंटेनर के शुरू में दिखाने के लिए शुरू में दिखाया जाता है:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

स्वयं आयात करें

उदाहरण

flex-end मान को बैक की ओर दिखाने के लिए बैक की ओर दिखाया जाता है:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

स्वयं आयात करें

आदर्श केंद्रीकरण

इस उदाहरण में, हम एक बहुत सामान्य शैली समस्या को हल करेंगे: आदर्श केंद्रीकरण।

समाधान: इसे justify-content और align-items गुण को केंद्र में सेट करने के बाद फ्लेक्स प्रोजेक्ट्स पूरी तरह से केंद्रीत होंगे:

उदाहरण

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

स्वयं आयात करें

सबएलमेंट (प्रोजेक्ट)

flex के डायरेक्ट सबएलमेंट स्वचालित रूप से फ्लेक्सबल (flex) प्रोजेक्ट के रूप में बन जाते हैं।

1
2
3
4

ऊपरी एलिमेंट एक ग्रे फ्लेक्स कंटेनर के भीतर चार नीले फ्लेक्स आइटमों का प्रतिनिधित्व करता है।

उदाहरण

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

स्वयं आयात करें

इलास्टिक आइटम के लिए इस्तेमाल किए जाने वाले अभियात्मक हैं:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order अभियात्मक

order इस अभियात्मक फ्लेक्स आइटम की क्रमवारी को निर्धारित करती है。

1
2
3
4

कोड में पहले फ्लेक्स आइटम को लेयाउट में पहला आइटम के रूप में दिखाया नहीं जाना चाहिए。

order यह मान 0 होना चाहिए, जो डिफ़ॉल्ट मान है。

उदाहरण

order इस अभियात्मक को फ्लेक्स आइटम की क्रमवारी को बदल सकती है:

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

स्वयं आयात करें

flex-grow अभियात्मक

flex-grow इस अभियात्मक फ्लेक्स आइटम को अन्य इलास्टिक आइटम की तुलना में कितनी मात्रा में बढ़ने को निर्धारित करती है。

1
2
3

यह मान 0 होना चाहिए, जो डिफ़ॉल्ट मान है。

उदाहरण

तीसरे इलास्टिक आइटम को अन्य इलास्टिक आइटम की तुलना में आठ गुना तेजी से बढ़ने की अनुमति दें:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

स्वयं आयात करें

flex-shrink अभियात्मक

flex-shrink इस अभियात्मक फ्लेक्स आइटम को अन्य इलास्टिक आइटम के समान खिंचने की कितनी मात्रा में खिंचने को निर्धारित करती है。

1
2
3
4
5
6
7
8
9

यह मान 0 होना चाहिए, जो डिफ़ॉल्ट मान है。

उदाहरण

तीसरे इलास्टिक आइटम को अन्य इलास्टिक आइटम के समान खिंचने की अनुमति नहीं दें:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

स्वयं आयात करें

flex-basis अभियात्मक

flex-basis इस अभियात्मक फ्लेक्स आइटम की प्रारंभिक लंबाई को निर्धारित करती है。

1
2
3
4

उदाहरण

तीसरे इलास्टिक आइटम की प्रारंभिक लंबाई 200 पिक्सल के रूप में सेट करें:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

स्वयं आयात करें

flex अभियात्मक

flex इस अभियात्मक फ्लेक्सग्रोथ, फ्लेक्सश्रिंक और फ्लेक्सबेस अभियात्मक का एक लघुरूप है。

उदाहरण

तीसरे इलास्टिक आइटम को बढ़ने के लिए अनुमति नहीं दें (0), खिंचने के लिए अनुमति नहीं दें (0) और प्रारंभिक लंबाई 200 पिक्सल है:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

स्वयं आयात करें

align-self अभियात्मक

align-self प्रयोगता नियम इलास्टिक कंटेनर के भीतर चयनित आइटम के ज्ञायिताकरण के तरीके को निर्धारित करती है。

align-self गुण कंटेनर के align-items गुण द्वारा निर्धारित डिफ़ॉल्ट अलाइनिंग को ओवरराइड करेगा।

1
2
3
4

इन उदाहरणों में, हम 200 पिक्सल ऊंचाई वाले कंटेनर का उपयोग करते हैं, ताकि align-self गुण का बेहतर प्रदर्शन किया जा सके:

उदाहरण

तीसरी फ्लेक्सबॉक्स वस्तु को कंटेनर के मध्य में अलाइन करें:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

स्वयं आयात करें

उदाहरण

दूसरी फ्लेक्सबॉक्स वस्तु को कंटेनर के शीर्ष पर अलाइन करें, तीसरी फ्लेक्सबॉक्स वस्तु को कंटेनर के नीचे अलाइन करें:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

स्वयं आयात करें

Flexbox का उपयोग करने वाली रिस्पांसिव इमेज लाइब्रेरी

flexbox का उपयोग करके रिस्पांसिव इमेज लाइब्रेरी बनाएं, जो स्क्रीन आकार के अनुसार चार इमेजों, दो इमेजों या पूर्ण चौड़ाई के इमेजों में परिवर्तित होती है:

स्वयं आयात करें

Flexbox का उपयोग करने वाली रिस्पांसिव वेबसाइट

flexbox का उपयोग करके रिस्पांसिव वेबसाइट बनाएं, जिसमें फ्लेक्सबॉक्स नेविगेशन बार और फ्लेक्सबॉक्स सामग्री है:

स्वयं आयात करें

CSS Flexbox गुण

नीचे दिए गए तालिका में flexbox के साथ उपयोग किए जाने वाले CSS गुणों को दर्शाया गया है:

गुण वर्णन
display एचटीएमएल एलिमेंट के लिए बॉक्स तरीके को निर्धारित करता है。
flex-direction फ्लेक्सबॉक्स के भीतर फ्लेक्सबॉक्स वस्तुओं के दिशा को निर्धारित करता है。
justify-content जब फ्लेक्सबॉक्स वस्तु मुख्य अक्ष पर सभी उपलब्ध जगह का उपयोग नहीं करती है, तो इसे बहुतांश अलाइन करता है。
align-items जब फ्लेक्सबॉक्स वस्तु मुख्य अक्ष पर सभी उपलब्ध जगह का उपयोग नहीं करती है, तो इसे ऊपरी ओर अलाइन करता है。
flex-wrap फ्लेक्सबॉक्स वस्तु को फ्लेक्स रेखा पर फिर से लाने के लिए निर्धारित करता है, यदि एक फ्लेक्स रेखा में उनके लिए पर्याप्त जगह नहीं है।
align-content flex-wrap गुण के व्यवहार को संशोधित करता है। यह align-items के समान है, लेकिन यह फ्लेक्सबॉक्स वस्तुओं को नहीं अलाइन करता, बल्कि flex रेखा को अलाइन करता है。
flex-flow flex-direction और flex-wrap गुणों का लघुरूप.
order फ्लेक्सबॉक्स के भीतर अन्य फ्लेक्सबॉक्स वस्तुओं के प्रति फ्लेक्सबॉक्स वस्तु की गिनती निर्धारित करता है。
align-self फ्लेक्सबॉक्स के भीतर फ्लेक्सबॉक्स वस्तुओं के लिए उपयोग किया जाता है। इसका प्रभाव वहां पड़ता है जहां अलाइन-आइटम्स गुण का प्रभाव पड़ता है。
flex flex-grow, flex-shrink और flex-basis गुणों का लघुरूप.