सीएसएस फ्लेक्सबॉक्स ट्यूटोरियल: मूल बातें

फ्लेक्सबॉक्स सीएसएस में पेज लेआउट को संभालने का एक उत्कृष्ट तरीका है। यह मूल कंटेनर ("फ्लेक्स-कंटेनर") के भीतर सभी जगह पर कब्जा करने के लिए किसी आइटम की ऊंचाई और चौड़ाई में हेरफेर कर सकता है और प्रत्येक बच्चे ("फ्लेक्स-आइटम") के लंबवत और क्षैतिज प्रवाह को नियंत्रित कर सकता है।

यदि आप फ्लेक्सबॉक्स में नए हैं, तो आप वह सब कुछ सीखेंगे जो आपको तुरंत आरंभ करने के लिए चाहिए। हम बुनियादी बातों पर उतरेंगे और उचित उदाहरणों के साथ सबसे अधिक उपयोग किए जाने वाले फ्लेक्सबॉक्स गुणों पर चर्चा करेंगे।

सीएसएस फ्लेक्सबॉक्स क्या है?

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

दूसरे शब्दों में, सीएसएस फ्लेक्सबॉक्स का उपयोग करते हुए, तत्व 'लचीले' होते हैं और एक आधुनिक उत्तरदायी डिजाइन विकसित करने के लिए इसका आकार बदला जा सकता है और इसे बेहतर तरीके से तैनात किया जा सकता है।

मूल फ्लेक्सबॉक्स अवधारणा और शब्दावली

फ्लेक्स-कंटेनर और फ्लेक्स-आइटम फ्लेक्सबॉक्स लेआउट के मूल घटक हैं। आप फ्लेक्स-कंटेनर को उस पृष्ठ पर मूल तत्व के रूप में मान सकते हैं जिसमें फ्लेक्स-आइटम के रूप में जाने वाले बच्चे शामिल हैं। फ्लेक्स लेआउट के पीछे मुख्य विचार यह है कि फ्लेक्स-कंटेनर के अंदर सभी फ्लेक्स-आइटम या तो मुख्य अक्ष या क्रॉस अक्ष के साथ रखे गए हैं जैसा कि नीचे दिखाया गया है:

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

क्रॉस-अक्ष : यह मुख्य अक्ष के लंबवत है। दूसरे शब्दों में, यदि फ्लेक्स-दिशा पंक्ति या पंक्ति-रिवर्स है , तो मुख्य अक्ष फ्लेक्स कंटेनर की चौड़ाई के साथ चलेगी, और इसलिए क्रॉस अक्ष फ्लेक्स कंटेनर की ऊंचाई के साथ चलेगी। दूसरी ओर, यदि फ्लेक्स-दिशा कॉलम या कॉलम-रिवर्स है , तो मुख्य अक्ष फ्लेक्स कंटेनर की ऊंचाई के साथ चलेगी, और इस प्रकार, क्रॉस-अक्ष फ्लेक्स-कंटेनर की चौड़ाई के साथ चलेगी।

फ्लेक्स कंटेनर के लिए फ्लेक्सबॉक्स गुण

प्रदर्शन संपत्ति:

पहली चीज जो आपको करनी है वह है डिस्प्ले प्रॉपर्टी को फ्लेक्स पर सेट करना। यह एक फ्लेक्स कंटेनर को परिभाषित करता है। विभिन्न लेआउट के लिए अन्य मान इनलाइन , ब्लॉक और इनलाइन-ब्लॉक हो सकते हैंप्रदर्शन सहेजकर : फ्लेक्स; आप सभी फ्लेक्स-आइटम के लिए एक फ्लेक्स संदर्भ सक्षम कर रहे हैं।

फ्लेक्स-दिशा संपत्ति:

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

फ्लेक्स-रैप संपत्ति:

यदि आप flex-container के अंदर flex-items की संख्या बढ़ाने का प्रयास करते हैं, तो वे सभी डिफ़ॉल्ट रूप से एक पंक्ति में फ़िट होने का प्रयास करेंगे। आप मूल कंटेनर के अंदर आइटम को एकाधिक पंक्तियों में लपेटने के लिए flex-wrap गुण सेट करके इसे बदल सकते हैं। यह तीन मान स्वीकार करता है: अब्रैप (डिफ़ॉल्ट), रैप और रैप-रिवर्स

फ्लेक्स-फ्लो गुण:

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

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

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

औचित्य-सामग्री संपत्ति पांच अलग-अलग तरीकों से संरेखण बनाती है:

 justify-content: flex-start;

यह व्यतिक्रम मूल्य है। सभी आइटम पैरेंट कंटेनर की शुरुआत में, यानी पैरेंट कंटेनर के ऊपर-बाईं ओर संरेखित होते हैं।

 justify-content: center;

सभी आइटम मूल कंटेनर के केंद्र में पैक किए जाते हैं।

 justify-content: flex-end;

सभी आइटम पैरेंट कंटेनर की अंतिम पंक्ति में ले जाए जाते हैं।

 justify-content: space-between;

सभी आइटम समान रूप से पंक्ति में वितरित किए जाते हैं, जिसमें पहला आइटम प्रारंभ में और अंतिम आइटम अंत में होता है।

 justify-content: space-around;

सभी वस्तुओं में बाएँ और दाएँ पक्षों पर समान स्थान होता है। ध्यान दें कि पहले और आखिरी आइटम में कंटेनर किनारे के खिलाफ एक इकाई स्थान होगा, लेकिन पड़ोसी flex-item के बीच अंतरिक्ष की दो इकाइयां होंगी।

संरेखण-आइटम संपत्ति:

आइटम संरेखित करें एक छोटे से अंतर के साथ औचित्य-सामग्री के समान है। यहां, सभी आइटम क्रॉस-एक्सिस (मुख्य अक्ष के लंबवत) के आधार पर संरेखित हैं।

संरेखण-आइटम पांच अलग अलग मान स्वीकार करता है:

 align-items: stretch;

यह व्यतिक्रम मूल्य है। सभी आइटम कंटेनर को भरने के लिए खिंचाव करते हैं।

 align-items: flex-start;

सभी आइटम कंटेनर (क्रॉस-एक्सिस) की शुरुआत में पैक किए जाते हैं।

 align-items: center;

सभी आइटम क्रॉस अक्ष में flex-contain r के केंद्र में पैक किए जाते हैं।

 align-items: flex-end;

सभी आइटम कंटेनर (क्रॉस-एक्सिस) के अंत तक पैक किए जाते हैं।

 align-items: baseline;

सभी वस्तुओं को इस तरह से संरेखित किया जाता है कि उनकी आधार रेखाएं (पाठ) संरेखित हों।

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

सुनिश्चित करें कि फ्लेक्स-कंटेनर में कई पंक्तियों में आइटम हैं, और फ्लेक्स-रैप प्रॉपर्टी को या तो रैप या रैप-रिवर्स पर सेट किया गया है ताकि एलाइन-कंटेंट प्रॉपर्टी को देखा जा सके। यह आवश्यक है क्योंकि औचित्य-सामग्री संपत्ति मुख्य अक्ष के भीतर फ्लेक्स-आइटम को संरेखित करती है , संरेखण-सामग्री संपत्ति उन पंक्तियों को क्रॉस-अक्ष में संरेखित करती है (जब कुछ अतिरिक्त स्थान होता है)।

फ्लेक्स आइटम के लिए फ्लेक्सबॉक्स गुण

संरेखण-स्वयं संपत्ति:

यह आपको एक व्यक्तिगत फ्लेक्स-आइटम के संरेखण को समायोजित करने की अनुमति देता है। जैसा कि हम फ्लेक्स-कंटेनर में सेट करते हैं, इसमें संरेखण-वस्तुओं के सभी गुण होते हैं । आप अन्य पड़ोसी वस्तुओं को परेशान किए बिना एकल फ्लेक्स-आइटम की स्थिति बदलने के लिए इसका उपयोग कर सकते हैं। यह छह मान स्वीकार करता है: ऑटो , फ्लेक्स-स्टार्ट , फ्लेक्स-एंड , सेंटर , बेसलाइन , स्ट्रेच

आदेश संपत्ति:

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

फ्लेक्स-ग्रो संपत्ति:

यह फ्लेक्स-कंटेनर के अंदर फ्लेक्स-आइटम के स्थानिक वितरण को परिभाषित करता है। उदाहरण के लिए, "2" पर सेट flex-grow संपत्ति वाले आइटम अन्य के रूप में उपलब्ध स्थान से दोगुना लेने का प्रयास करेंगे। ध्यान दें कि यह नकारात्मक मान स्वीकार नहीं करता है।

फ्लेक्स-सिकुड़ संपत्ति:

डिफ़ॉल्ट रूप से, यह 1 पर सेट होता है। यदि आवश्यक हो तो आप फ्लेक्स-आइटम को छोटा कर सकते हैं।

फ्लेक्स-आधार संपत्ति:

जब आप flex-items को आकार देना चाहते हैं, विशेष रूप से चौड़ाई के साथ, आप आमतौर पर width संपत्ति का उपयोग नहीं करते हैं, बल्कि इसके बजाय, flex-base का उपयोग करते हैं। डिफ़ॉल्ट रूप से, यह ऑटो पर सेट होता है।

फ्लेक्स संपत्ति:

यह flex-grow , flex-shrink , और flex-base गुणों के लिए शॉर्टहैंड है, जहां अंतिम दो गुण वैकल्पिक हैं। इसका मतलब है कि यदि आप फ्लेक्स प्रॉपर्टी को "1" पर सेट करते हैं, तो फ्लेक्स-ग्रो को एक पर सेट किया जाएगा, जबकि फ्लेक्स-सिकुड़ने और फ्लेक्स-बेस का डिफ़ॉल्ट मान होगा। उन सभी व्यक्तिगत गुणों के साथ जगह लेने के बजाय इस शॉर्टहैंड संपत्ति का उपयोग करने की अनुशंसा की जाती है।

CSS: अपनी साइट को स्टाइल के साथ डिज़ाइन करें

हम जानते हैं कि इसमें बहुत कुछ करना है, और हमें यकीन है कि आप अपनी परियोजनाओं में फ्लेक्सबॉक्स का उपयोग करने के लिए तैयार हैं। लेकिन हम फ्लेक्सबॉक्स क्या कर सकते हैं इसकी सतह को खरोंच कर रहे हैं!

सीएसएस हर जगह है। आपकी साइट की पृष्ठभूमि छवि सेट करने से लेकर CSS flexbox के साथ लेआउट डिजाइन करने तक, इसने हमारे वेब प्रबंधन के तरीके में क्रांति ला दी है। ये सभी महत्वपूर्ण गुण आपकी वेब विकास यात्रा में बहुत उपयोगी होंगे। आप इस लेख में जो कुछ भी सीखा है उसे लागू कर सकते हैं ताकि आप भयानक उत्तरदायी लेआउट बनाना शुरू कर सकें। हैप्पी कोडिंग!