View source for सीएसएस फ्लेक्सिबल बॉक्स लेआउट

{{short description|CSS3 web layout mode}}
{{Infobox technology standard
| title             = Flexbox
| long_name         = CSS Flexible Box Layout
| native_name       = CSS Flexible Box Layout
| native_name_lang  = en
| image             = 
| caption           = 
| status            = [[World Wide Web Consortium#Candidate recommendation (CR)|Candidate Recommendation (CR)]]
| year_started      = {{Start date|2009|07|23|df=y}}<ref name="css-flex-history">{{Cite web|url=https://www.w3.org/standards/history/css-flexbox-1|title=CSS Flexible Box Layout Module Level 1 Publication History - W3C|website=W3C|date=n.d.|access-date=2021-04-08}}</ref>
| first_published   =
| version           = Level 1<ref name="css-flex-v1">{{Cite web|url=https://www.w3.org/TR/css-flexbox-1/|title=CSS Flexible Box Layout Module Level 1|website=W3C|publication-date=2018-11-09|access-date=2021-04-08|collaboration=CSS Working Group
|editor-first1=Tab|editor-last1=Atkins Jr.
|editor-first2=Elika J.|editor-last2=Etemad
|editor-first3=Rossen|editor-last3=Atanassov
|editor-first4=Alex|editor-last4=Mogilevsky
|editor-first5=L. David|editor-last5=Baron
|editor-first6=Neil|editor-last6=Deakin
|editor-first7=Ian|editor-last7=Hickson
|editor-first8=David|editor-last8=Hyatt
}}</ref>
| version_date      = {{Start date|2018|11|09}}<ref name="css-flex-v1" />
| preview           = Working Draft
| preview_date      = {{Start date|2021|03|25}}<ref name="flexbox-draft">{{Cite web|url=https://drafts.csswg.org/css-flexbox/|title=CSS Flexible Box Layout Module Level 1|website=CSS Working Group Editor Drafts|date=2021-03-25|access-date=2021-04-08
|editor-first1=Tab|editor-last1=Atkins Jr
|editor-first2=Elika J.|editor-last2=Etemad
|editor-first3=Rossen|editor-last3=Atanassov
|editor-first4=Alex|editor-last4=Mogilevsky
|editor-first5=L. David|editor-last5=Baron
|editor-first6=Neil|editor-last6=Deakin
|editor-first7=Ian|editor-last7=Hickson
|editor-first8=David|editor-last8=Hyatt
}}</ref>
| organization      = {{Plainlist|
* {{abbr|[[World Wide Web Consortium|W3C]]|World Wide Web Consortium}}
* [[Apple Inc.|Apple]]
* [[Google]]
* [[Microsoft]]
* [[Mozilla Corporation|Mozilla]]
* [[Opera Software]]
}}
| committee         = [[CSS Working Group]]<ref name="css-flex-v1" />
| editors           = {{Plainlist|
* Tab Atkins Jr.
* Elika J. Etemad
* Rossen Atanassov
{{Collapsible list|title=Former editors|
* Alex Mogilevsky
* L. David Baron
* Neil Deakin
* Ian Hickson
* David Hyatt
}}
}}<ref name="css-flex-v1" />
| authors           = 
| base_standards    = [[CSS]]
| related_standards = 
| abbreviation      = Flexbox
| domain            = 
| license           = 
| website           = {{URL|https://www.w3.org/TR/css-flexbox-1/}}
}}

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

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

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

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


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

<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-first2=Elika J.|editor-last2=Etemad
|editor-first3=Rossen|editor-last3=Atanassov
|editor-first4=Oriol|editor-last4=Brufau
|editor-first5=Alex|editor-last5=Mogilevsky
|editor-first6=Phil|editor-last6=Cupp
}}</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>



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

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

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

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

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

== उपयोग ==
किसी तत्व को फ्लेक्स तत्व के रूप में नामित करने के लिए तत्व की सीएसएस डिस्प्ले प्रॉपर्टी को फ्लेक्स या इनलाइन-फ्लेक्स में निम्नानुसार सेट करने की आवश्यकता होती है:
<syntaxhighlight lang="CSS">display: 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>



=== केंद्र से संरेखित करें ===
फ्लेक्सबॉक्स के लाभों में से एक कंटेनर के अंदर वस्तुओं को पृष्ठ के केंद्र में लंबवत और क्षैतिज रूप से सरलता से संरेखित करने की क्षमता है।<syntaxhighlight lang="css">
display: flex;
align-items: center;
justify-content: center;
</syntaxhighlight>


==संदर्भ==
{{reflist}}
<!--- After listing your sources please cite them using inline citations and place them after the information they cite. Please see http://en.wikipedia.org/wiki/Wikipedia:REFB for instructions on how to add citations. --->

{{W3C Standards}}
[[Category: कैस्केडिंग स्टाइल शीट्स | कैस्केडिंग स्टाइल शीट्स ]] [[Category: वेब डिजाइन]] [[Category: वर्ल्ड वाइड वेब कंसोर्टियम मानक]] 



[[Category: Machine Translated Page]]
[[Category:Created On 16/06/2023]]