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

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 के दशक में, बूटस्ट्रैप जैसे लोकप्रिय जावास्क्रिप्ट विन्यास सॉफ्टवेयर ढांचा का गहन उपयोग ने सीएसएस फ्लेक्स बॉक्स और ग्रिड विन्यास निर्देशिकाओं को प्रेरित किया।

सीएसएस 3 मॉड्यूल में फ्लेक्स बॉक्स और ग्रिड जैसे समाधान शामिल थे। जैसे फ्लेक्स बॉक्सऔर सीएसएस ग्रिड विन्यास।

दिसम्बर 2022 के अनुसार, स्थापित ब्राउज़रों में 99.68% (99.59% डेस्कटॉप ब्राउज़रों और 100% मोबाइल ब्राउज़रों) को सीएसएस फ्लेक्सिबल बॉक्स विन्यास का समर्थन है।।

शब्दावली

फ्लेक्स बॉक्स विन्यास प्रारूप के साथ निम्नलिखित शब्द जुड़े हुए हैं:

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

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

फ्लेक्स वस्तु

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

अक्ष

प्रत्येक फ्लेक्स बॉक्स में दो धाराएँ होती हैं: मुख्य धारा और प्रतिधारा धारा। मुख्य धारा वह धारा होती है जिस पर वस्तु एक दूसरे के साथ संरेखित होते हैं। प्रतिधारा धारा मुख्य धारा के लगभग लंबाई के विरुद्ध स्थापित होती है।

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

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

औचित्य-विषय वस्तु

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

संरेखित-वस्तु

प्रत्येक पंक्ति पर क्रॉस अक्ष पर फ्लेक्स वस्तु कैसे रखे जाते हैं, इसके लिए व्यतिक्रम स्वतः निर्धारित करता है।

संरेखित-वस्तु

क्रॉस अक्ष रेखाओं को संरेखित करने के तरीके के लिए व्यतिक्रम स्वतः निर्धारित करता है।

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

यह निर्धारित करता है कि क्रॉस अक्ष के साथ एक वस्तु कैसे रखा जाता है। यह संरेखित-वस्तु द्वारा निर्धारित किसी भी व्यतिक्रम को प्रत्यादिष्ट करता है।

निर्देश

क्रॉस-प्रारंभ

क्रॉस-समाप्त

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

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

मुख्य अंत

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

आदेश

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

फ्लेक्सिबल फ्लो

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

रेखाएँ

पंक्तियां

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

आयाम

मुख्य आकार

क्रॉस आकार

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

उपयोग

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

display: flex;

या:

display: inline-flex;

ऊपर दिए गए दो मानों में से किसी एक को सेट करके, एक तत्व फ्लेक्स कंटेनर बन जाता है और इसके वंशज, फ्लेक्स वस्तु बन जाते हैं। डिस्प्ले को फ्लेक्स पर सेट करने से कंटेनर एक ब्लॉक-स्तरीय तत्व बनता है, जबकि डिस्प्ले को इनलाइन-फ्लेक्स पर सेट करने से कंटेनर इनलाइन-स्तरीय तत्व बनता है।

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

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

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