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

{{short description|CSS3 web layout mode}}
{{multiple issues|
{{more citations needed|date=April 2014}}
{{technical|date=April 2014}}
{{too abstract|date=Jan 2017}}
}}
{{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/}}
}}

सीएसएस फ्लेक्सिबल बॉक्स लेआउट, जिसे आमतौर पर फ्लेक्सबॉक्स के रूप में जाना जाता है,<ref name="css-flex-v1" />एक कैस्केडिंग स्टाइल शीट्स#CSS 3|CSS 3 वेब लेआउट मॉडल है।<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> यह [[W3C]] की उम्मीदवार अनुशंसा (CR) अवस्था में है।<ref name="css-flex-v1" />फ्लेक्स लेआउट व्यूपोर्ट (डिवाइस स्क्रीन) आकार के आधार पर एक कंटेनर के भीतर उत्तरदायी वेब डिज़ाइन तत्वों को स्वचालित रूप से व्यवस्थित करने की अनुमति देता है।
{{CSS}}

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

CSS फ्लेक्स-बॉक्स लेआउट HTML पेजों के लेआउट को निर्दिष्ट करने का एक विशेष तरीका है।

फ्लेक्स लेआउट की सबसे परिभाषित विशेषताओं में से एक इसकी देखने के वातावरण के आधार पर फॉर्म-फिट करने की क्षमता है। फ्लेक्स बॉक्स आकार में समायोजित कर सकते हैं - या तो घटते हुए, अनावश्यक रूप से एकाधिकार स्थान से बचने के लिए, या इसकी सीमाओं के भीतर सामग्री के लिए जगह बनाने के लिए बढ़ाना। इसके अलावा, अन्य [[सीएसएस]] लेआउट मॉडल की तुलना में सामग्री प्रवाह के संदर्भ में फ्लेक्स लेआउट कम प्रतिबंधात्मक है, जो आम तौर पर एक-दिशात्मक होते हैं। फ्लेक्स दिशात्मक प्रवाह को दाएं, बाएं, ऊपर या नीचे निर्दिष्ट किया जा सकता है। उपलब्ध लेआउट स्थान के अनुरूप एक फ्लेक्स कंटेनर के भीतर अलग-अलग आइटम स्वचालित रूप से पुनर्व्यवस्थित हो सकते हैं।<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>
CSS 3 मॉड्यूल में इसके समान समाधान शामिल हैं, जैसे flexbox<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>

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


== शब्दावली ==
निम्नलिखित शर्तें फ्लेक्सबॉक्स लेआउट मॉडल से जुड़ी हैं।

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

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

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

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

== उपयोग ==
किसी तत्व को फ्लेक्स तत्व के रूप में नामित करने के लिए तत्व की सीएसएस डिस्प्ले प्रॉपर्टी को फ्लेक्स या इनलाइन-फ्लेक्स में निम्नानुसार सेट करने की आवश्यकता होती है:
<syntaxhighlight lang="CSS">display: flex;</syntaxhighlight>
या:
<syntaxhighlight lang="CSS">display: inline-flex;</syntaxhighlight>
प्रदर्शन को ऊपर दिए गए दो मानों में से एक पर सेट करके, एक तत्व एक फ्लेक्स कंटेनर और उसके बच्चे, फ्लेक्स आइटम बन जाते हैं। डिस्प्ले को फ्लेक्स पर सेट करने से कंटेनर HTML एलिमेंट#ब्लॉक एलिमेंट|ब्लॉक-लेवल एलिमेंट बन जाता है, जबकि डिस्प्ले को इनलाइन-फ्लेक्स पर सेट करने से कंटेनर HTML एलिमेंट#इनलाइन एलिमेंट|इनलाइन-लेवल एलिमेंट बन जाता है।<ref name="mdn-webdocs-flexbox" />



=== केंद्र से संरेखित करें ===
फ्लेक्सबॉक्स के फायदों में से एक कंटेनर के भीतर वस्तुओं को पृष्ठ के केंद्र में लंबवत और क्षैतिज रूप से आसानी से संरेखित करने की क्षमता है।<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]]