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

From Vigyanwiki
(Created page with "{{short description|CSS3 web layout mode}} {{multiple issues| {{more citations needed|date=April 2014}} {{technical|date=April 2014}} {{too abstract|date=Jan 2017}} }} {{Infob...")
 
No edit summary
Line 1: Line 1:
{{short description|CSS3 web layout mode}}
{{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
{{Infobox technology standard
| title            = Flexbox
| title            = Flexbox
Line 67: Line 62:
}}
}}


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


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


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




Line 93: Line 88:


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


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




Revision as of 21:42, 24 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/

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

Cascading Style Sheets
Concepts
Philosophies
Tools
Comparisons

अवधारणाएं

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

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

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


इतिहास

2000 के दशक में मोबाइल एजेंट द्वारा वेब के गहन उपयोग ने तरल लेआउट और प्रदर्शन आकार की बढ़ती विविधता के लिए उत्तरदायी वेब डिज़ाइन#इतिहास को प्रेरित किया।[4] 2010 के दशक में, बूटस्ट्रैप (फ्रंट-एंड फ्रेमवर्क) जैसे लोकप्रिय जावास्क्रिप्ट लेआउट सॉफ्टवेयर ढांचा का गहन उपयोग, सीएसएस फ्लेक्स-बॉक्स और ग्रिड लेआउट विनिर्देशों को प्रेरित करता है।[5] CSS 3 मॉड्यूल में इसके समान समाधान शामिल हैं, जैसे flexbox[2]और सीएसएस ग्रिड लेआउट।[6]

As of December 2022, 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;


संदर्भ

  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 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. ↑ 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=203185’