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

Flexbox

CSS Flexible Box Layout
Abbreviation	Flexbox
Native name	CSS Flexible Box Layout
Status	Candidate Recommendation (CR)
Year started	23 July 2009 (2009-07-23)
Latest version	Level 1 November 9, 2018 (2018-11-09)
Preview version	Working Draft March 25, 2021 (2021-03-25)
Organization	W3C Apple Google Microsoft Mozilla Opera Software
Committee	CSS Working Group
Editors	Tab Atkins Jr. Elika J. Etemad Rossen Atanassov Former editors Alex Mogilevsky L. David Baron Neil Deakin Ian Hickson David Hyatt
Base standards	CSS
Website	www.w3.org/TR/css-flexbox-1/

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

अवधारणाएं

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

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

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

इतिहास

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

As of December 2022, 99.68% स्थापित ब्राउज़र (डेस्कटॉप ब्राउज़र का 99.59%) और 100% मोबाइल ब्राउज़र) CSS फ्लेक्सिबल बॉक्स लेआउट को सपोर्ट करता है।

शब्दावली

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

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

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

फ्लेक्स आइटम

फ्लेक्स कंटेनर के भीतर रखे गए किसी भी प्रत्यक्ष बाल तत्व को फ्लेक्स आइटम माना जाता है। कंटेनर तत्व के भीतर कोई भी पाठ अज्ञात फ्लेक्स आइटम में लपेटा गया है।

अक्ष

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

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

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

औचित्य-सामग्री

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

संरेखित-आइटम

प्रत्येक पंक्ति पर क्रॉस अक्ष पर फ्लेक्स आइटम कैसे रखे जाते हैं, इसके लिए डिफ़ॉल्ट निर्धारित करता है।

संरेखित-सामग्री

क्रॉस अक्ष रेखाओं को संरेखित करने के तरीके के लिए डिफ़ॉल्ट निर्धारित करता है।

संरेखण-स्वयं

यह निर्धारित करता है कि क्रॉस अक्ष के साथ एक आइटम कैसे रखा जाता है। यह align-items द्वारा निर्धारित किसी भी डिफ़ॉल्ट को ओवरराइड करता है।

निर्देश

क्रॉस-स्टार्ट

क्रॉस-एंड

क्रॉस-स्टार्ट/क्रॉस-एंड पक्ष निर्धारित करते हैं कि क्रॉस-स्टार्ट से क्रॉस-एंड तक फ्लेक्स आइटम्स से फ्लेक्स लाइनें कहां भरती हैं।

मुख्य-प्रारंभ

मुख्य अंत

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

आदेश

तत्वों को समूहों में रखता है और निर्धारित करता है कि उन्हें कंटेनर के भीतर किस क्रम में रखा जाना है।

फ्लेक्स-फ्लो

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

रेखाएँ

पंक्तियां

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

आयाम

मुख्य आकार

क्रॉस आकार

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

उपयोग

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

display: flex;

या:

display: inline-flex;

प्रदर्शन को ऊपर दिए गए दो मानों में से एक पर सेट करके, एक तत्व एक फ्लेक्स कंटेनर और उसके बच्चे, फ्लेक्स आइटम बन जाते हैं। डिस्प्ले को फ्लेक्स पर सेट करने से कंटेनर HTML एलिमेंट#ब्लॉक एलिमेंट|ब्लॉक-लेवल एलिमेंट बन जाता है, जबकि डिस्प्ले को इनलाइन-फ्लेक्स पर सेट करने से कंटेनर HTML एलिमेंट#इनलाइन एलिमेंट|इनलाइन-लेवल एलिमेंट बन जाता है।

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

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

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