सीएसएस फ्लेक्सिबल बॉक्स लेआउट: Difference between revisions
No edit summary |
No edit summary |
||
Line 62: | Line 62: | ||
}} | }} | ||
सीएसएस लचीला बॉक्स | सीएसएस लचीला बॉक्स विन्यास, जिसे सामान्यतः फ्लेक्सबॉक्स के नाम से जाना जाता है, एक सीएसएस 3 वेब विन्यास प्रारूप है।,<ref name="css-flex-v1" />यह W3C के पदान्वेषी अनुशंसा अवस्था में है। लचीला विन्यास एक कंटेनर के अंदर अभिक्रियाशील तत्वों को दृश्यद्वार के आकार के आधार पर स्वचालित रूप से व्यवस्थित करने की अनुमति देता है। | ||
{{CSS}} | {{CSS}} | ||
== अवधारणाएं == | == अवधारणाएं == | ||
अधिकांश | अधिकांश वेब पेज एचटीएमएल (हाइपरटेक्स्ट मार्कअप भाषा) और सीएसएस (कैस्केडिंग स्टाइल शीट्स) के संयोजन में लिखे जाते हैं। संक्षेप में,एचटीएमएल पृष्ठ की सामग्री और तार्किक संरचना को निर्दिष्ट करता है, जबकि सीएसएस निर्दिष्ट करता है कि यह कैसा दिखता है: इसके रंग, फ़ॉन्ट, स्वरूपण, विन्यास और शैली। | ||
सीएसएस लचीला बॉक्स विन्यास,एचटीएमएल पेजों के विन्यास को निर्दिष्ट करने का एक विशेष विधि है। | |||
लचीले विन्यास की सबसे महत्वपूर्ण विशेषताओं में से एक उसकी क्षमता है कि यह अपने दृश्य पर्यावरण के आधार पर स्वतः आदर्श आकार बना सकती है। लचीला बॉक्स आकार में समायोजित हो सकते हैं - या तो कम करके अतिरिक्त स्थान का व्यर्थ बनने से बचते हैं, या बढ़ाकर उन्हें सीमाओं के अंदर विषय वस्तु को सेट होने के लिए जगह देते हैं। इसके अतिरिक्त, अन्य [[सीएसएस]] विन्यास प्रारूप के सापेक्ष में सामग्री प्रवाह के संदर्भ में फ्लेक्स विन्यास कम प्रतिबंधात्मक है, जो सामान्यतः एक-दिशात्मक होते हैं। लचीला दिशात्मक प्रवाह को दाएं, बाएं, ऊपर या नीचे निर्दिष्ट किया जा सकता है। उपलब्ध विन्यास स्थान के अनुरूप एक लचीला कंटेनर के अंदर अलग-अलग वस्तु स्वचालित रूप से पुनर्व्यवस्थित हो सकते हैं।<ref name="flexbox-draft" /> | |||
== इतिहास == | == इतिहास == | ||
2000 के दशक में [[मोबाइल एजेंट]] द्वारा वेब के गहन उपयोग ने तरल | 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 | 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-first1=Tab|editor-last1=Atkins Jr. | ||
|editor-first2=Elika J.|editor-last2=Etemad | |editor-first2=Elika J.|editor-last2=Etemad | ||
Line 84: | Line 84: | ||
}}</ref> | }}</ref> | ||
{{As of|2022|12}}, 99.68% स्थापित ब्राउज़र (डेस्कटॉप ब्राउज़र का 99.59%)<!--"tracked desktop"--> और 100% मोबाइल ब्राउज़र<!-- "tracked mobile"-->) CSS फ्लेक्सिबल बॉक्स | {{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 डिस्प्ले प्रॉपर्टी का उपयोग करके, कंटेनर को फ्लेक्स या इनलाइन-फ्लेक्स के रूप में परिभाषित किया जा सकता है। | : मूल तत्व जो सभी फ्लेक्स आइटम रखता है। CSS डिस्प्ले प्रॉपर्टी का उपयोग करके, कंटेनर को फ्लेक्स या इनलाइन-फ्लेक्स के रूप में परिभाषित किया जा सकता है। | ||
फ्लेक्स आइटम | फ्लेक्स आइटम | ||
: फ्लेक्स कंटेनर के | : फ्लेक्स कंटेनर के अंदर रखे गए किसी भी प्रत्यक्ष बाल तत्व को फ्लेक्स आइटम माना जाता है। कंटेनर तत्व के अंदर कोई भी पाठ अज्ञात फ्लेक्स आइटम में लपेटा गया है। | ||
;अक्ष | ;अक्ष | ||
: प्रत्येक फ्लेक्स बॉक्स में दो अक्ष होते हैं: मुख्य और अनुप्रस्थ अक्ष। मुख्य धुरी वह धुरी है जिस पर आइटम एक दूसरे के साथ संरेखित होते हैं। अनुप्रस्थ अक्ष मुख्य अक्ष के लंबवत है। | : प्रत्येक फ्लेक्स बॉक्स में दो अक्ष होते हैं: मुख्य और अनुप्रस्थ अक्ष। मुख्य धुरी वह धुरी है जिस पर आइटम एक दूसरे के साथ संरेखित होते हैं। अनुप्रस्थ अक्ष मुख्य अक्ष के लंबवत है। | ||
लचीला दिशा | |||
: मुख्य धुरी स्थापित करता है। संभावित तर्क: पंक्ति (डिफ़ॉल्ट), पंक्ति-रिवर्स, कॉलम, कॉलम-रिवर्स। | : मुख्य धुरी स्थापित करता है। संभावित तर्क: पंक्ति (डिफ़ॉल्ट), पंक्ति-रिवर्स, कॉलम, कॉलम-रिवर्स। | ||
औचित्य-सामग्री | औचित्य-सामग्री | ||
Line 113: | Line 113: | ||
; मुख्य-प्रारंभ | ; मुख्य-प्रारंभ | ||
; मुख्य अंत | ; मुख्य अंत | ||
: मेन-स्टार्ट/मेन-एंड पक्ष यह निर्धारित करते हैं कि फ्लेक्स कंटेनर के | : मेन-स्टार्ट/मेन-एंड पक्ष यह निर्धारित करते हैं कि फ्लेक्स कंटेनर के अंदर फ्लेक्स आइटम्स को कहां से शुरू करना है, मेन-स्टार्ट एंड से शुरू होकर मेन-एंड एंड तक जाना है। | ||
;आदेश | ;आदेश | ||
: तत्वों को समूहों में रखता है और निर्धारित करता है कि उन्हें कंटेनर के | : तत्वों को समूहों में रखता है और निर्धारित करता है कि उन्हें कंटेनर के अंदर किस क्रम में रखा जाना है। | ||
लचीला फ्लो | |||
: आशुलिपि | : आशुलिपि लचीला दिशा और फ्लेक्स सामग्री रखने के लिए लचीला रैप। | ||
=== रेखाएँ === | === रेखाएँ === | ||
; पंक्तियां | ; पंक्तियां | ||
:फ्लेक्स आइटम को या तो एक सिंगल लाइन पर या कई लाइनों पर रखा जा सकता है, जैसा कि | :फ्लेक्स आइटम को या तो एक सिंगल लाइन पर या कई लाइनों पर रखा जा सकता है, जैसा कि लचीला रैप प्रॉपर्टी द्वारा परिभाषित किया गया है, जो क्रॉस एक्सिस की दिशा और कंटेनर के अंदर लाइनों को कैसे स्टैक करता है, दोनों को नियंत्रित करता है। | ||
=== आयाम === | === आयाम === | ||
Line 138: | Line 138: | ||
=== केंद्र से संरेखित करें === | === केंद्र से संरेखित करें === | ||
फ्लेक्सबॉक्स के फायदों में से एक कंटेनर के | फ्लेक्सबॉक्स के फायदों में से एक कंटेनर के अंदर वस्तुओं को पृष्ठ के केंद्र में लंबवत और क्षैतिज रूप से आसानी से संरेखित करने की क्षमता है।<syntaxhighlight lang="css"> | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; |
Revision as of 22:56, 24 June 2023
CSS Flexible Box Layout | |
Abbreviation | Flexbox |
---|---|
Native name | CSS Flexible Box Layout |
Status | Candidate Recommendation (CR) |
Year started | 23 July 2009[1] |
Latest version | Level 1[2] November 9, 2018[2] |
Preview version | Working Draft March 25, 2021[3] |
Organization | |
Committee | CSS Working Group[2] |
Editors |
Former editors
|
Base standards | CSS |
Website | www |
सीएसएस लचीला बॉक्स विन्यास, जिसे सामान्यतः फ्लेक्सबॉक्स के नाम से जाना जाता है, एक सीएसएस 3 वेब विन्यास प्रारूप है।,[2]यह W3C के पदान्वेषी अनुशंसा अवस्था में है। लचीला विन्यास एक कंटेनर के अंदर अभिक्रियाशील तत्वों को दृश्यद्वार के आकार के आधार पर स्वचालित रूप से व्यवस्थित करने की अनुमति देता है।
Cascading Style Sheets |
---|
Concepts |
Philosophies |
Tools |
Comparisons |
अवधारणाएं
अधिकांश वेब पेज एचटीएमएल (हाइपरटेक्स्ट मार्कअप भाषा) और सीएसएस (कैस्केडिंग स्टाइल शीट्स) के संयोजन में लिखे जाते हैं। संक्षेप में,एचटीएमएल पृष्ठ की सामग्री और तार्किक संरचना को निर्दिष्ट करता है, जबकि सीएसएस निर्दिष्ट करता है कि यह कैसा दिखता है: इसके रंग, फ़ॉन्ट, स्वरूपण, विन्यास और शैली।
सीएसएस लचीला बॉक्स विन्यास,एचटीएमएल पेजों के विन्यास को निर्दिष्ट करने का एक विशेष विधि है।
लचीले विन्यास की सबसे महत्वपूर्ण विशेषताओं में से एक उसकी क्षमता है कि यह अपने दृश्य पर्यावरण के आधार पर स्वतः आदर्श आकार बना सकती है। लचीला बॉक्स आकार में समायोजित हो सकते हैं - या तो कम करके अतिरिक्त स्थान का व्यर्थ बनने से बचते हैं, या बढ़ाकर उन्हें सीमाओं के अंदर विषय वस्तु को सेट होने के लिए जगह देते हैं। इसके अतिरिक्त, अन्य सीएसएस विन्यास प्रारूप के सापेक्ष में सामग्री प्रवाह के संदर्भ में फ्लेक्स विन्यास कम प्रतिबंधात्मक है, जो सामान्यतः एक-दिशात्मक होते हैं। लचीला दिशात्मक प्रवाह को दाएं, बाएं, ऊपर या नीचे निर्दिष्ट किया जा सकता है। उपलब्ध विन्यास स्थान के अनुरूप एक लचीला कंटेनर के अंदर अलग-अलग वस्तु स्वचालित रूप से पुनर्व्यवस्थित हो सकते हैं।[3]
इतिहास
2000 के दशक में मोबाइल एजेंट द्वारा वेब के गहन उपयोग ने तरल विन्यास और प्रदर्शन आकार की बढ़ती विविधता के लिए उत्तरदायी वेब डिज़ाइन#इतिहास को प्रेरित किया।[4] 2010 के दशक में, बूटस्ट्रैप (फ्रंट-एंड फ्रेमवर्क) जैसे लोकप्रिय जावास्क्रिप्ट विन्यास सॉफ्टवेयर ढांचा का गहन उपयोग, सीएसएस लचीला बॉक्स और ग्रिड विन्यास विनिर्देशों को प्रेरित करता है।[5] CSS 3 मॉड्यूल में इसके समान समाधान शामिल हैं, जैसे flexbox[2]और सीएसएस ग्रिड विन्यास ।[6]
As of December 2022[update], 99.68% स्थापित ब्राउज़र (डेस्कटॉप ब्राउज़र का 99.59%) और 100% मोबाइल ब्राउज़र) CSS फ्लेक्सिबल बॉक्स विन्यास को सपोर्ट करता है।[7]
शब्दावली
निम्नलिखित शर्तें फ्लेक्सबॉक्स विन्यास प्रारूप से जुड़ी हैं।
फ्लेक्स कंटेनर
- मूल तत्व जो सभी फ्लेक्स आइटम रखता है। CSS डिस्प्ले प्रॉपर्टी का उपयोग करके, कंटेनर को फ्लेक्स या इनलाइन-फ्लेक्स के रूप में परिभाषित किया जा सकता है।
फ्लेक्स आइटम
- फ्लेक्स कंटेनर के अंदर रखे गए किसी भी प्रत्यक्ष बाल तत्व को फ्लेक्स आइटम माना जाता है। कंटेनर तत्व के अंदर कोई भी पाठ अज्ञात फ्लेक्स आइटम में लपेटा गया है।
- अक्ष
- प्रत्येक फ्लेक्स बॉक्स में दो अक्ष होते हैं: मुख्य और अनुप्रस्थ अक्ष। मुख्य धुरी वह धुरी है जिस पर आइटम एक दूसरे के साथ संरेखित होते हैं। अनुप्रस्थ अक्ष मुख्य अक्ष के लंबवत है।
लचीला दिशा
- मुख्य धुरी स्थापित करता है। संभावित तर्क: पंक्ति (डिफ़ॉल्ट), पंक्ति-रिवर्स, कॉलम, कॉलम-रिवर्स।
औचित्य-सामग्री
- निर्धारित करता है कि सामग्री को वर्तमान रेखा पर मुख्य अक्ष पर कैसे रखा जाता है। वैकल्पिक तर्क: बाएँ, दाएँ, केंद्र, अंतरिक्ष-बीच, अंतरिक्ष-चारों ओर।
संरेखित-आइटम
- प्रत्येक पंक्ति पर क्रॉस अक्ष पर फ्लेक्स आइटम कैसे रखे जाते हैं, इसके लिए डिफ़ॉल्ट निर्धारित करता है।
- संरेखित-सामग्री
- क्रॉस अक्ष रेखाओं को संरेखित करने के तरीके के लिए डिफ़ॉल्ट निर्धारित करता है।
- संरेखण-स्वयं
- यह निर्धारित करता है कि क्रॉस अक्ष के साथ एक आइटम कैसे रखा जाता है। यह align-items द्वारा निर्धारित किसी भी डिफ़ॉल्ट को ओवरराइड करता है।
निर्देश
- क्रॉस-स्टार्ट
- क्रॉस-एंड
- क्रॉस-स्टार्ट/क्रॉस-एंड पक्ष निर्धारित करते हैं कि क्रॉस-स्टार्ट से क्रॉस-एंड तक फ्लेक्स आइटम्स से फ्लेक्स लाइनें कहां भरती हैं।
- मुख्य-प्रारंभ
- मुख्य अंत
- मेन-स्टार्ट/मेन-एंड पक्ष यह निर्धारित करते हैं कि फ्लेक्स कंटेनर के अंदर फ्लेक्स आइटम्स को कहां से शुरू करना है, मेन-स्टार्ट एंड से शुरू होकर मेन-एंड एंड तक जाना है।
- आदेश
- तत्वों को समूहों में रखता है और निर्धारित करता है कि उन्हें कंटेनर के अंदर किस क्रम में रखा जाना है।
लचीला फ्लो
- आशुलिपि लचीला दिशा और फ्लेक्स सामग्री रखने के लिए लचीला रैप।
रेखाएँ
- पंक्तियां
- फ्लेक्स आइटम को या तो एक सिंगल लाइन पर या कई लाइनों पर रखा जा सकता है, जैसा कि लचीला रैप प्रॉपर्टी द्वारा परिभाषित किया गया है, जो क्रॉस एक्सिस की दिशा और कंटेनर के अंदर लाइनों को कैसे स्टैक करता है, दोनों को नियंत्रित करता है।
आयाम
- मुख्य आकार
- क्रॉस आकार
- मुख्य आकार और क्रॉस आकार फ्लेक्स कंटेनर की ऊंचाई और चौड़ाई हैं, प्रत्येक क्रमशः मुख्य और क्रॉस अक्ष से निपटते हैं।
उपयोग
किसी तत्व को फ्लेक्स तत्व के रूप में नामित करने के लिए तत्व की सीएसएस डिस्प्ले प्रॉपर्टी को फ्लेक्स या इनलाइन-फ्लेक्स में निम्नानुसार सेट करने की आवश्यकता होती है:
display: flex;
या:
display: inline-flex;
प्रदर्शन को ऊपर दिए गए दो मानों में से एक पर सेट करके, एक तत्व एक फ्लेक्स कंटेनर और उसके बच्चे, फ्लेक्स आइटम बन जाते हैं। डिस्प्ले को फ्लेक्स पर सेट करने से कंटेनर HTML एलिमेंट#ब्लॉक एलिमेंट|ब्लॉक-लेवल एलिमेंट बन जाता है, जबकि डिस्प्ले को इनलाइन-फ्लेक्स पर सेट करने से कंटेनर HTML एलिमेंट#इनलाइन एलिमेंट|इनलाइन-लेवल एलिमेंट बन जाता है।[8]
केंद्र से संरेखित करें
फ्लेक्सबॉक्स के फायदों में से एक कंटेनर के अंदर वस्तुओं को पृष्ठ के केंद्र में लंबवत और क्षैतिज रूप से आसानी से संरेखित करने की क्षमता है।
display: flex;
align-items: center;
justify-content: center;
संदर्भ
- ↑ "CSS Flexible Box Layout Module Level 1 Publication History - W3C". W3C. n.d. Retrieved 2021-04-08.
- ↑ 2.0 2.1 2.2 2.3 2.4 2.5 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.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.
- ↑ Bail, Jeff (2012-10-23). "प्रतिक्रियाशील वेबसाइटें बनाने के लिए CSS मीडिया क्वेरीज़ का उपयोग करें". IBM Developer. Archived from the original on 2020-10-13. Retrieved 2021-04-08.
- ↑ Shepherd, Richard (2011-09-19). "CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started". Smashing Magazine. Retrieved 2021-04-08.
- ↑ 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.
- ↑ "सीएसएस लचीला बॉक्स लेआउट मॉड्यूल". Can I use. Retrieved 2020-09-03.
- ↑ "फ्लेक्सबॉक्स की बुनियादी अवधारणाएँ". MDN Web Docs. n.d. Retrieved 2021-04-08.