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

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/

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

अवधारणाएं

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

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

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

इतिहास

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;