सीएसएस फ्लेक्सिबल बॉक्स लेआउट: Difference between revisions

From Vigyanwiki
No edit summary
Line 62: Line 62:
}}
}}


सीएसएस लचीला बॉक्स विन्यास, जिसे सामान्यतः फ्लेक्सबॉक्स के नाम से जाना जाता है, एक सीएसएस 3 वेब विन्यास प्रारूप है।,<ref name="css-flex-v1" />यह W3C के पदान्वेषी अनुशंसा अवस्था में है। लचीला विन्यास एक कंटेनर के अंदर अभिक्रियाशील तत्वों को दृश्यद्वार के आकार के आधार पर स्वचालित रूप से व्यवस्थित करने की अनुमति देता है।
सीएसएस फ्लेक्सिबल बॉक्स लेआउट, जिसे सामान्यतः फ्लेक्सबॉक्स के नाम से जाना जाता है, एक सीएसएस 3 वेब विन्यास प्रारूप है। यह W3C के कैंडिडेट रेकमेंडेशन चरण में है। फ्लेक्स अभिविन्यास, एक पात्र के भीतर सामरिक तत्वों को दृश्यद्वार के आकार के आधार पर स्वचालित रूप से व्यवस्थित करने की अनुमति देता है।
{{CSS}}
{{CSS}}


Line 68: Line 68:
अधिकांश वेब पेज एचटीएमएल (हाइपरटेक्स्ट मार्कअप भाषा) और सीएसएस (कैस्केडिंग स्टाइल शीट्स) के संयोजन में लिखे जाते हैं। संक्षेप में,एचटीएमएल पृष्ठ की सामग्री और तार्किक संरचना को निर्दिष्ट करता है, जबकि सीएसएस निर्दिष्ट करता है कि यह कैसा दिखता है: इसके रंग, फ़ॉन्ट, स्वरूपण, विन्यास और शैली।
अधिकांश वेब पेज एचटीएमएल (हाइपरटेक्स्ट मार्कअप भाषा) और सीएसएस (कैस्केडिंग स्टाइल शीट्स) के संयोजन में लिखे जाते हैं। संक्षेप में,एचटीएमएल पृष्ठ की सामग्री और तार्किक संरचना को निर्दिष्ट करता है, जबकि सीएसएस निर्दिष्ट करता है कि यह कैसा दिखता है: इसके रंग, फ़ॉन्ट, स्वरूपण, विन्यास और शैली।


सीएसएस लचीला बॉक्स विन्यास,एचटीएमएल पेजों के विन्यास को निर्दिष्ट करने का एक विशेष विधि है।
सीएसएस फ्लेक्स बॉक्स विन्यास,एचटीएमएल पेजों के विन्यास को निर्दिष्ट करने का एक विशेष विधि है।


लचीले विन्यास की सबसे महत्वपूर्ण विशेषताओं में से एक उसकी क्षमता है कि यह अपने दृश्य पर्यावरण के आधार पर स्वतः आदर्श आकार बना सकती है। लचीला  बॉक्स आकार में समायोजित हो सकते हैं - या तो कम करके अतिरिक्त स्थान का व्यर्थ बनने से बचते हैं, या बढ़ाकर उन्हें सीमाओं के अंदर विषय वस्तु को सेट होने के लिए जगह देते हैं। इसके अतिरिक्त, अन्य [[सीएसएस]] विन्यास प्रारूप के सापेक्ष में सामग्री प्रवाह के संदर्भ में फ्लेक्स विन्यास कम प्रतिबंधात्मक है, जो सामान्यतः एक-दिशात्मक होते हैं। लचीला दिशात्मक प्रवाह को दाएं, बाएं, ऊपर या नीचे निर्दिष्ट किया जा सकता है। उपलब्ध विन्यास स्थान के अनुरूप एक लचीला कंटेनर के अंदर अलग-अलग वस्तु स्वचालित रूप से पुनर्व्यवस्थित हो सकते हैं।<ref name="flexbox-draft" />
फ्लेक्स विन्यास की सबसे महत्वपूर्ण विशेषताओं में से एक उसकी क्षमता है कि यह अपने दृश्य पर्यावरण के आधार पर स्वतः आदर्श आकार बना सकती है। फ्लेक्सिबल बॉक्स आकार में समायोजित हो सकते हैं - या तो कम करके अतिरिक्त स्थान का व्यर्थ बनने से बचते हैं, या बढ़ाकर उन्हें सीमाओं के अंदर विषय वस्तु को सेट होने के लिए जगह देते हैं। इसके अतिरिक्त, अन्य [[सीएसएस]] विन्यास प्रारूप के सापेक्ष में सामग्री प्रवाह के संदर्भ में फ्लेक्स विन्यास कम प्रतिबंधात्मक है, जो सामान्यतः एक-दिशात्मक होते हैं। फ्लेक्सिबल दिशात्मक प्रवाह को दाएं, बाएं, ऊपर या नीचे निर्दिष्ट किया जा सकता है। उपलब्ध विन्यास स्थान के अनुरूप एक फ्लेक्सिबल कंटेनर के अंदर अलग-अलग वस्तु स्वचालित रूप से पुनर्व्यवस्थित हो सकते हैं।<ref name="flexbox-draft" />




Line 76: Line 76:
2000 के दशक में मोबाइल एजेंट्स द्वारा वेब के प्रयोग का अधिकतम उपयोग स्पर्श किया गया, जिसने बढ़ती हुई स्क्रीन के आकारों की विविधता के लिए " द्रव विन्यास" और प्रतिक्रियाशील तत्वों को प्रेरित किया।<ref>{{Cite web|url=https://www.ibm.com/developerworks/library/wa-cssqueries/index.html|archive-url=https://web.archive.org/web/20201013191836/https://www.ibm.com/developerworks/library/wa-cssqueries/index.html|url-status=dead|archive-date=2020-10-13|title=प्रतिक्रियाशील वेबसाइटें बनाने के लिए CSS मीडिया क्वेरीज़ का उपयोग करें|website=IBM Developer|publication-date=2012-10-23|access-date=2021-04-08|author-first=Jeff|author-last=Bail}}</ref>  
2000 के दशक में मोबाइल एजेंट्स द्वारा वेब के प्रयोग का अधिकतम उपयोग स्पर्श किया गया, जिसने बढ़ती हुई स्क्रीन के आकारों की विविधता के लिए " द्रव विन्यास" और प्रतिक्रियाशील तत्वों को प्रेरित किया।<ref>{{Cite web|url=https://www.ibm.com/developerworks/library/wa-cssqueries/index.html|archive-url=https://web.archive.org/web/20201013191836/https://www.ibm.com/developerworks/library/wa-cssqueries/index.html|url-status=dead|archive-date=2020-10-13|title=प्रतिक्रियाशील वेबसाइटें बनाने के लिए CSS मीडिया क्वेरीज़ का उपयोग करें|website=IBM Developer|publication-date=2012-10-23|access-date=2021-04-08|author-first=Jeff|author-last=Bail}}</ref>  


2010 के दशक में, [[बूटस्ट्रैप (फ्रंट-एंड फ्रेमवर्क)|बूटस्ट्रैप]] जैसे लोकप्रिय [[जावास्क्रिप्ट]] विन्यास [[ सॉफ्टवेयर ढांचा |सॉफ्टवेयर ढांचा]] का गहन उपयोग ने सीएसएस लचीला बॉक्स और ग्रिड विन्यास निर्देशिकाओं को प्रेरित किया।
2010 के दशक में, [[बूटस्ट्रैप (फ्रंट-एंड फ्रेमवर्क)|बूटस्ट्रैप]] जैसे लोकप्रिय [[जावास्क्रिप्ट]] विन्यास [[ सॉफ्टवेयर ढांचा |सॉफ्टवेयर ढांचा]] का गहन उपयोग ने सीएसएस फ्लेक्स बॉक्स और ग्रिड विन्यास निर्देशिकाओं को प्रेरित किया।


<ref>{{Cite web|url=https://www.smashingmagazine.com/2011/09/css3-flexible-box-layout-explained/|title=CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started|website=Smashing Magazine|date=2011-09-19|access-date=2021-04-08|author-first=Richard|author-last=Shepherd}}</ref>सीएसएस 3 मॉड्यूल में लचीला बॉक्स और ग्रिड जैसे समाधान शामिल थे। जैसे लचीला बॉक्स<ref name="css-flex-v1" />और [[सीएसएस ग्रिड लेआउट|सीएसएस ग्रिड विन्यास]]।<ref name="css3-grid">{{Cite web|url=https://www.w3.org/TR/css-grid-1/|title=सीएसएस ग्रिड लेआउट मॉड्यूल स्तर 1|publisher=CSS Working Group|website=W3C|publication-date=2020-12-18|access-date=2021-04-08
<ref>{{Cite web|url=https://www.smashingmagazine.com/2011/09/css3-flexible-box-layout-explained/|title=CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started|website=Smashing Magazine|date=2011-09-19|access-date=2021-04-08|author-first=Richard|author-last=Shepherd}}</ref>सीएसएस 3 मॉड्यूल में फ्लेक्स बॉक्स और ग्रिड जैसे समाधान शामिल थे। जैसे फ्लेक्स बॉक्स<ref name="css-flex-v1" />और [[सीएसएस ग्रिड लेआउट|सीएसएस ग्रिड विन्यास]]।<ref name="css3-grid">{{Cite web|url=https://www.w3.org/TR/css-grid-1/|title=सीएसएस ग्रिड लेआउट मॉड्यूल स्तर 1|publisher=CSS Working Group|website=W3C|publication-date=2020-12-18|access-date=2021-04-08
|editor-first1=Tab|editor-last1=Atkins Jr.
|editor-first1=Tab|editor-last1=Atkins Jr.
|editor-first2=Elika J.|editor-last2=Etemad
|editor-first2=Elika J.|editor-last2=Etemad
Line 87: Line 87:
}}</ref>
}}</ref>


दिसम्बर 2022 के अनुसार, स्थापित ब्राउज़रों में 99.68% (99.59% डेस्कटॉप ब्राउज़रों और 100% मोबाइल ब्राउज़रों) को सीएसएस लचीला बॉक्स विन्यास का समर्थन है।।<ref name="caniuse.com">{{cite web |title=सीएसएस लचीला बॉक्स लेआउट मॉड्यूल|url=https://caniuse.com/flexbox |work=Can I use |accessdate=2020-09-03}}</ref>
दिसम्बर 2022 के अनुसार, स्थापित ब्राउज़रों में 99.68% (99.59% डेस्कटॉप ब्राउज़रों और 100% मोबाइल ब्राउज़रों) को सीएसएस फ्लेक्सिबल बॉक्स विन्यास का समर्थन है।।<ref name="caniuse.com">{{cite web |title=सीएसएस लचीला बॉक्स लेआउट मॉड्यूल|url=https://caniuse.com/flexbox |work=Can I use |accessdate=2020-09-03}}</ref>






== शब्दावली ==
== शब्दावली ==
लचीला बॉक्स विन्यास प्रारूप के साथ निम्नलिखित शब्द जुड़े हुए हैं:
फ्लेक्स बॉक्स विन्यास प्रारूप के साथ निम्नलिखित शब्द जुड़े हुए हैं:


'''लचीला कंटेनर'''
'''फ्लेक्सिबल कंटेनर'''
: मूल तत्व जो सभी फ्लेक्स आइटम रखता है। सीएसएस डिस्प्ले प्रॉपर्टी का उपयोग करके, कंटेनर को फ्लेक्स या इनलाइन-फ्लेक्स के रूप में परिभाषित किया जा सकता है।
: मूल तत्व जो सभी फ्लेक्स आइटम रखता है। सीएसएस डिस्प्ले प्रॉपर्टी का उपयोग करके, कंटेनर को फ्लेक्स या इनलाइन-फ्लेक्स के रूप में परिभाषित किया जा सकता है।
'''फ्लेक्स वस्तु'''  
'''फ्लेक्स वस्तु'''  
Line 100: Line 100:
;अक्ष
;अक्ष
: प्रत्येक फ्लेक्स बॉक्स में दो धाराएँ होती हैं: मुख्य धारा और प्रतिधारा धारा। मुख्य धारा वह धारा होती है जिस पर वस्तु एक दूसरे के साथ संरेखित होते हैं। प्रतिधारा धारा मुख्य धारा के लगभग लंबाई के विरुद्ध स्थापित होती है।
: प्रत्येक फ्लेक्स बॉक्स में दो धाराएँ होती हैं: मुख्य धारा और प्रतिधारा धारा। मुख्य धारा वह धारा होती है जिस पर वस्तु एक दूसरे के साथ संरेखित होते हैं। प्रतिधारा धारा मुख्य धारा के लगभग लंबाई के विरुद्ध स्थापित होती है।
'''लचीला दिशा'''
'''फ्लेक्सिबल      दिशा'''
: मुख्य धुरी स्थापित करता है। संभावित तर्क: पंक्ति (डिफ़ॉल्ट), पंक्ति-उत्क्रम स्तंभ, स्तंभ-उत्क्रम।
: मुख्य धुरी स्थापित करता है। संभावित तर्क: पंक्ति (डिफ़ॉल्ट), पंक्ति-उत्क्रम स्तंभ, स्तंभ-उत्क्रम।
'''औचित्य-विषय वस्तु'''
'''औचित्य-विषय वस्तु'''
Line 106: Line 106:
'''संरेखित-वस्तु'''  
'''संरेखित-वस्तु'''  
: प्रत्येक पंक्ति पर क्रॉस अक्ष पर फ्लेक्स वस्तु कैसे रखे जाते हैं, इसके लिए व्यतिक्रम स्वतः निर्धारित करता है।
: प्रत्येक पंक्ति पर क्रॉस अक्ष पर फ्लेक्स वस्तु कैसे रखे जाते हैं, इसके लिए व्यतिक्रम स्वतः निर्धारित करता है।
;संरेखित-सामग्री
;संरेखित-'''वस्तु'''
: क्रॉस अक्ष रेखाओं को संरेखित करने के तरीके के लिए व्यतिक्रम स्वतः निर्धारित करता है।
: क्रॉस अक्ष रेखाओं को संरेखित करने के तरीके के लिए व्यतिक्रम स्वतः निर्धारित करता है।
;संरेखण-स्वयं
;संरेखण-स्वयं
Line 114: Line 114:
; क्रॉस-प्रारंभ  
; क्रॉस-प्रारंभ  
; क्रॉस-समाप्त  
; क्रॉस-समाप्त  
: क्रॉस-स्टार्ट/क्रॉस-एंड पक्ष निर्धारित करते हैं कि क्रॉस-स्टार्ट से क्रॉस-एंड तक फ्लेक्स आइटम्स से फ्लेक्स लाइनें कहां भरती हैं।
: क्रॉस-स्टार्ट/क्रॉस-एंड पक्ष निर्धारित करते हैं कि क्रॉस-स्टार्ट से क्रॉस-एंड तक फ्लेक्स वस्तु से फ्लेक्स लाइनें कहां भरती हैं।
; मुख्य-प्रारंभ
; मुख्य-प्रारंभ
; मुख्य अंत
; मुख्य अंत
Line 120: Line 120:
;आदेश
;आदेश
: तत्वों को समूहों में रखता है और निर्धारित करता है कि उन्हें कंटेनर के अंदर किस क्रम में रखा जाना है।
: तत्वों को समूहों में रखता है और निर्धारित करता है कि उन्हें कंटेनर के अंदर किस क्रम में रखा जाना है।
'''लचीला  फ्लो'''
'''फ्लेक्सिबल फ्लो'''
: आशुलिपि लचीलादिशा और फ्लेक्स सामग्री रखने के लिए लचीला रैप।
: आशुलिपि फ्लेक्सिबल दिशा और फ्लेक्स सामग्री रखने के लिए फ्लेक्सिबल रैप।


=== रेखाएँ ===
=== रेखाएँ ===
; पंक्तियां
; पंक्तियां
:फ्लेक्स आइटम को या तो एक सिंगल लाइन पर या कई लाइनों पर रखा जा सकता है, जैसा कि लचीला    रैप प्रॉपर्टी द्वारा परिभाषित किया गया है, जो क्रॉस एक्सिस की दिशा और कंटेनर के अंदर लाइनों को कैसे स्टैक करता है, दोनों को नियंत्रित करता है।
:फ्लेक्स आइटम को या तो एक एकल रेखा पर या कई लाइनों पर रखा जा सकता है, जैसा कि फ्लेक्स-रैप प्रॉपर्टी द्वारा परिभाषित किया गया है, जो क्रॉस अक्ष की दिशा और कंटेनर के भीतर लाइनों के ढेर दोनों को नियंत्रित करता है


=== आयाम ===
=== आयाम ===
Line 133: Line 133:


== उपयोग ==
== उपयोग ==
किसी तत्व को फ्लेक्स तत्व के रूप में नामित करने के लिए तत्व की सीएसएस डिस्प्ले प्रॉपर्टी को फ्लेक्स या इनलाइन-फ्लेक्स में निम्नानुसार सेट करने की आवश्यकता होती है:
किसी तत्व को फ्लेक्स तत्व के रूप में नामित करने के लिए तत्व की सीएसएस डिस्प्ले अधिकार को फ्लेक्स या इनलाइन-फ्लेक्स में निम्नानुसार सेट करने की आवश्यकता होती है:
<syntaxhighlight lang="CSS">display: flex;</syntaxhighlight>
<syntaxhighlight lang="CSS">display: flex;</syntaxhighlight>
या:
या:
<syntaxhighlight lang="CSS">display: inline-flex;</syntaxhighlight>
<syntaxhighlight lang="CSS">display: inline-flex;</syntaxhighlight>
प्रदर्शन को ऊपर दिए गए दो मानों में से एक पर सेट करके, एक तत्व एक फ्लेक्स कंटेनर और उसके बच्चे, फ्लेक्स आइटम बन जाते हैं। डिस्प्ले को फ्लेक्स पर सेट करने से कंटेनर HTML एलिमेंट ब्लॉक एलिमेंट|ब्लॉक-लेवल एलिमेंट बन जाता है, जबकि डिस्प्ले को इनलाइन-फ्लेक्स पर सेट करने से कंटेनर HTML एलिमेंट इनलाइन एलिमेंट इनलाइन-लेवल एलिमेंट बन जाता है।<ref name="mdn-webdocs-flexbox">{{Cite web|url=https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox|title=फ्लेक्सबॉक्स की बुनियादी अवधारणाएँ|date=n.d.|access-date=2021-04-08|website=MDN Web Docs}}</ref>
ऊपर दिए गए दो मानों में से किसी एक को सेट करके, एक तत्व फ्लेक्स कंटेनर बन जाता है और इसके वंशज, फ्लेक्स वस्तु बन जाते हैं। डिस्प्ले को फ्लेक्स पर सेट करने से कंटेनर एक ब्लॉक-स्तरीय तत्व बनता है, जबकि डिस्प्ले को इनलाइन-फ्लेक्स पर सेट करने से कंटेनर इनलाइन-स्तरीय तत्व बनता है।<ref name="mdn-webdocs-flexbox">{{Cite web|url=https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox|title=फ्लेक्सबॉक्स की बुनियादी अवधारणाएँ|date=n.d.|access-date=2021-04-08|website=MDN Web Docs}}</ref>




Revision as of 10:17, 25 June 2023

Flexbox
CSS Flexible Box Layout
AbbreviationFlexbox
Native name
CSS Flexible Box Layout
StatusCandidate Recommendation (CR)
Year started23 July 2009 (2009-07-23)[1]
Latest versionLevel 1[2]
November 9, 2018 (2018-11-09)[2]
Preview versionWorking Draft
March 25, 2021 (2021-03-25)[3]
Organization
CommitteeCSS Working Group[2]
Editors
  • Tab Atkins Jr.
  • Elika J. Etemad
  • Rossen Atanassov
Former editors
    • Alex Mogilevsky
    • L. David Baron
    • Neil Deakin
    • Ian Hickson
    • David Hyatt
[2]
Base standardsCSS
Websitewww.w3.org/TR/css-flexbox-1/

सीएसएस फ्लेक्सिबल बॉक्स लेआउट, जिसे सामान्यतः फ्लेक्सबॉक्स के नाम से जाना जाता है, एक सीएसएस 3 वेब विन्यास प्रारूप है। यह W3C के कैंडिडेट रेकमेंडेशन चरण में है। फ्लेक्स अभिविन्यास, एक पात्र के भीतर सामरिक तत्वों को दृश्यद्वार के आकार के आधार पर स्वचालित रूप से व्यवस्थित करने की अनुमति देता है।

Cascading Style Sheets
Concepts
Philosophies
Tools
Comparisons

अवधारणाएं

अधिकांश वेब पेज एचटीएमएल (हाइपरटेक्स्ट मार्कअप भाषा) और सीएसएस (कैस्केडिंग स्टाइल शीट्स) के संयोजन में लिखे जाते हैं। संक्षेप में,एचटीएमएल पृष्ठ की सामग्री और तार्किक संरचना को निर्दिष्ट करता है, जबकि सीएसएस निर्दिष्ट करता है कि यह कैसा दिखता है: इसके रंग, फ़ॉन्ट, स्वरूपण, विन्यास और शैली।

सीएसएस फ्लेक्स बॉक्स विन्यास,एचटीएमएल पेजों के विन्यास को निर्दिष्ट करने का एक विशेष विधि है।

फ्लेक्स विन्यास की सबसे महत्वपूर्ण विशेषताओं में से एक उसकी क्षमता है कि यह अपने दृश्य पर्यावरण के आधार पर स्वतः आदर्श आकार बना सकती है। फ्लेक्सिबल बॉक्स आकार में समायोजित हो सकते हैं - या तो कम करके अतिरिक्त स्थान का व्यर्थ बनने से बचते हैं, या बढ़ाकर उन्हें सीमाओं के अंदर विषय वस्तु को सेट होने के लिए जगह देते हैं। इसके अतिरिक्त, अन्य सीएसएस विन्यास प्रारूप के सापेक्ष में सामग्री प्रवाह के संदर्भ में फ्लेक्स विन्यास कम प्रतिबंधात्मक है, जो सामान्यतः एक-दिशात्मक होते हैं। फ्लेक्सिबल दिशात्मक प्रवाह को दाएं, बाएं, ऊपर या नीचे निर्दिष्ट किया जा सकता है। उपलब्ध विन्यास स्थान के अनुरूप एक फ्लेक्सिबल कंटेनर के अंदर अलग-अलग वस्तु स्वचालित रूप से पुनर्व्यवस्थित हो सकते हैं।[3]


इतिहास

2000 के दशक में मोबाइल एजेंट्स द्वारा वेब के प्रयोग का अधिकतम उपयोग स्पर्श किया गया, जिसने बढ़ती हुई स्क्रीन के आकारों की विविधता के लिए " द्रव विन्यास" और प्रतिक्रियाशील तत्वों को प्रेरित किया।[4]

2010 के दशक में, बूटस्ट्रैप जैसे लोकप्रिय जावास्क्रिप्ट विन्यास सॉफ्टवेयर ढांचा का गहन उपयोग ने सीएसएस फ्लेक्स बॉक्स और ग्रिड विन्यास निर्देशिकाओं को प्रेरित किया।

[5]सीएसएस 3 मॉड्यूल में फ्लेक्स बॉक्स और ग्रिड जैसे समाधान शामिल थे। जैसे फ्लेक्स बॉक्स[2]और सीएसएस ग्रिड विन्यास।[6]

दिसम्बर 2022 के अनुसार, स्थापित ब्राउज़रों में 99.68% (99.59% डेस्कटॉप ब्राउज़रों और 100% मोबाइल ब्राउज़रों) को सीएसएस फ्लेक्सिबल बॉक्स विन्यास का समर्थन है।।[7]


शब्दावली

फ्लेक्स बॉक्स विन्यास प्रारूप के साथ निम्नलिखित शब्द जुड़े हुए हैं:

फ्लेक्सिबल कंटेनर

मूल तत्व जो सभी फ्लेक्स आइटम रखता है। सीएसएस डिस्प्ले प्रॉपर्टी का उपयोग करके, कंटेनर को फ्लेक्स या इनलाइन-फ्लेक्स के रूप में परिभाषित किया जा सकता है।

फ्लेक्स वस्तु

फ्लेक्स कंटेनर के अंदर रखे गए किसी भी प्रत्यक्ष बाल तत्व को फ्लेक्स वस्तु माना जाता है। कंटेनर तत्व के अंदर कोई भी पाठ अज्ञात फ्लेक्स वस्तु में लपेटा गया है।
अक्ष
प्रत्येक फ्लेक्स बॉक्स में दो धाराएँ होती हैं: मुख्य धारा और प्रतिधारा धारा। मुख्य धारा वह धारा होती है जिस पर वस्तु एक दूसरे के साथ संरेखित होते हैं। प्रतिधारा धारा मुख्य धारा के लगभग लंबाई के विरुद्ध स्थापित होती है।

फ्लेक्सिबल दिशा

मुख्य धुरी स्थापित करता है। संभावित तर्क: पंक्ति (डिफ़ॉल्ट), पंक्ति-उत्क्रम स्तंभ, स्तंभ-उत्क्रम।

औचित्य-विषय वस्तु

निर्धारित करता है कि विषय वस्तु को वर्तमान रेखा पर मुख्य अक्ष पर कैसे रखा जाता है। वैकल्पिक तर्क: बाएँ, दाएँ, केंद्र, अंतरिक्ष-बीच, अंतरिक्ष-चारों ओर।

संरेखित-वस्तु

प्रत्येक पंक्ति पर क्रॉस अक्ष पर फ्लेक्स वस्तु कैसे रखे जाते हैं, इसके लिए व्यतिक्रम स्वतः निर्धारित करता है।
संरेखित-वस्तु
क्रॉस अक्ष रेखाओं को संरेखित करने के तरीके के लिए व्यतिक्रम स्वतः निर्धारित करता है।
संरेखण-स्वयं
यह निर्धारित करता है कि क्रॉस अक्ष के साथ एक वस्तु कैसे रखा जाता है। यह संरेखित-वस्तु द्वारा निर्धारित किसी भी व्यतिक्रम को प्रत्यादिष्ट करता है।

निर्देश

क्रॉस-प्रारंभ
क्रॉस-समाप्त
क्रॉस-स्टार्ट/क्रॉस-एंड पक्ष निर्धारित करते हैं कि क्रॉस-स्टार्ट से क्रॉस-एंड तक फ्लेक्स वस्तु से फ्लेक्स लाइनें कहां भरती हैं।
मुख्य-प्रारंभ
मुख्य अंत
मेन-स्टार्ट/मेन-एंड पक्ष यह निर्धारित करते हैं कि फ्लेक्स कंटेनर के अंदर फ्लेक्स आइटम्स को कहां से शुरू करना है, मेन-स्टार्ट एंड से शुरू होकर मेन-एंड एंड तक जाना है।
आदेश
तत्वों को समूहों में रखता है और निर्धारित करता है कि उन्हें कंटेनर के अंदर किस क्रम में रखा जाना है।

फ्लेक्सिबल फ्लो

आशुलिपि फ्लेक्सिबल दिशा और फ्लेक्स सामग्री रखने के लिए फ्लेक्सिबल रैप।

रेखाएँ

पंक्तियां
फ्लेक्स आइटम को या तो एक एकल रेखा पर या कई लाइनों पर रखा जा सकता है, जैसा कि फ्लेक्स-रैप प्रॉपर्टी द्वारा परिभाषित किया गया है, जो क्रॉस अक्ष की दिशा और कंटेनर के भीतर लाइनों के ढेर दोनों को नियंत्रित करता है

आयाम

मुख्य आकार
क्रॉस आकार
मुख्य आकार और क्रॉस आकार फ्लेक्स कंटेनर की ऊंचाई और चौड़ाई हैं, प्रत्येक क्रमशः मुख्य और क्रॉस अक्ष से निपटते हैं।

उपयोग

किसी तत्व को फ्लेक्स तत्व के रूप में नामित करने के लिए तत्व की सीएसएस डिस्प्ले अधिकार को फ्लेक्स या इनलाइन-फ्लेक्स में निम्नानुसार सेट करने की आवश्यकता होती है: 

display: flex;

या: 

display: inline-flex;

ऊपर दिए गए दो मानों में से किसी एक को सेट करके, एक तत्व फ्लेक्स कंटेनर बन जाता है और इसके वंशज, फ्लेक्स वस्तु बन जाते हैं। डिस्प्ले को फ्लेक्स पर सेट करने से कंटेनर एक ब्लॉक-स्तरीय तत्व बनता है, जबकि डिस्प्ले को इनलाइन-फ्लेक्स पर सेट करने से कंटेनर इनलाइन-स्तरीय तत्व बनता है।[8]


केंद्र से संरेखित करें

फ्लेक्सबॉक्स के लाभों में से एक कंटेनर के अंदर वस्तुओं को पृष्ठ के केंद्र में लंबवत और क्षैतिज रूप से सरलता से संरेखित करने की क्षमता है।

display: flex;
align-items: center;
justify-content: center;


संदर्भ

  1. ↑ "CSS Flexible Box Layout Module Level 1 Publication History - W3C". W3C. n.d. Retrieved 2021-04-08.
  2. ↑ 2.0 2.1 2.2 2.3 2.4 Atkins Jr., Tab; Etemad, Elika J.; Atanassov, Rossen; Mogilevsky, Alex; Baron, L. David; Deakin, Neil; Hickson, Ian; Hyatt, David, eds. (2018-11-09). "CSS Flexible Box Layout Module Level 1". W3C. Retrieved 2021-04-08.
  3. ↑ 3.0 3.1 Atkins Jr, Tab; Etemad, Elika J.; Atanassov, Rossen; Mogilevsky, Alex; Baron, L. David; Deakin, Neil; Hickson, Ian; Hyatt, David, eds. (2021-03-25). "CSS Flexible Box Layout Module Level 1". CSS Working Group Editor Drafts. Retrieved 2021-04-08.
  4. ↑ Bail, Jeff (2012-10-23). "प्रतिक्रियाशील वेबसाइटें बनाने के लिए CSS मीडिया क्वेरीज़ का उपयोग करें". IBM Developer. Archived from the original on 2020-10-13. Retrieved 2021-04-08.
  5. ↑ Shepherd, Richard (2011-09-19). "CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started". Smashing Magazine. Retrieved 2021-04-08.
  6. ↑ Atkins Jr., Tab; Etemad, Elika J.; Atanassov, Rossen; Brufau, Oriol; Mogilevsky, Alex; Cupp, Phil, eds. (2020-12-18). "सीएसएस ग्रिड लेआउट मॉड्यूल स्तर 1". W3C. CSS Working Group. Retrieved 2021-04-08.
  7. ↑ "सीएसएस लचीला बॉक्स लेआउट मॉड्यूल". Can I use. Retrieved 2020-09-03.
  8. ↑ "फ्लेक्सबॉक्स की बुनियादी अवधारणाएँ". MDN Web Docs. n.d. Retrieved 2021-04-08.
Retrieved from ‘https://www.vigyanwiki.in/index.php?title=सीएसएस_फ्लेक्सिबल_बॉक्स_लेआउट&oldid=203188’