CSS फ्लेक्सबॉक्स मॉडल को स्थापित CSS बॉक्स मॉडल को बेहतर बनाने के लिए बनाया गया था। फ्लेक्सबॉक्स मॉडल में अभी भी बॉक्स मॉडल के प्रमुख तत्व (मार्जिन, पैडिंग, बॉर्डर और कंटेंट) हैं, लेकिन कंटेनर/पैरेंट के बच्चों के साथ जगह को सबसे अच्छी तरह भरने के लिए लचीलापन प्रदान करता है।
यह ट्यूटोरियल आपको फ्लेक्सबॉक्स मॉड्यूल को थोड़ा बेहतर समझने में मदद करेगा ताकि आप अपनी साइट्स को अधिक प्रतिक्रियाशील बनाना शुरू कर सकें।
पैरेंट कंटेनर (फ्लेक्सबॉक्स) प्रॉपर्टीज
display: flex
display: flex को पैरेंट कंटेनर पर जोड़ने से वह फ्लेक्स कंटेनर बन जाता है और उसके चाइल्ड फ्लेक्स आइटम बन जाते हैं। यह प्रॉपर्टी केवल उस कंटेनर को असाइन की जाती है - बच्चे इस प्रॉपर्टी को इनहेरिट नहीं करते (हालांकि वे अपने स्वयं के कंटेनर्स के लिए इसका उपयोग कर सकते हैं जो उनके बच्चों को प्रभावित करेगा)।
यह प्रॉपर्टी कई अन्य प्रॉपर्टीज को खोलती है जिनका हम पहले उपयोग नहीं कर सकते थे: flex-direction, justify-content, align-items, align-self, flex-wrap, और flex-flow।
flex-direction
flex-direction प्रॉपर्टी हमारे कंटेनर के मुख्य अक्ष को सेट करती है। डिफ़ॉल्ट सेटिंग row (बाएं से दाएं) है। column सेट करने पर मुख्य अक्ष ऊपर से नीचे हो जाता है।
row(डिफ़ॉल्ट): बाएं से दाएंcolumn: ऊपर से नीचेrow-reverse: दाएं से बाएंcolumn-reverse: नीचे से ऊपर
flex-wrap
डिफ़ॉल्ट रूप से, flex-wrap nowrap पर सेट होता है, जिससे चाइल्ड कंटेनर्स पैरेंट से बाहर निकल सकते हैं। flex-wrap: wrap जोड़ने से चाइल्ड्स अगली पंक्ति में चले जाते हैं जब जगह खत्म हो जाती है।
nowrap(डिफ़ॉल्ट): एक लाइन में, ओवरफ्लो हो सकता हैwrap: अगली लाइन में जाएंwrap-reverse: नीचे से ऊपर की ओर रैप करें
flex-flow
flex-flow flex-direction और flex-wrap का शॉर्टहैंड है। सिंटैक्स: flex-flow: column wrap। डिफ़ॉल्ट: row nowrap।
justify-content (मुख्य अक्ष पर अलाइनमेंट)
पैरेंट कंटेनर के मुख्य अक्ष के साथ अलाइनमेंट से संबंधित है। छह सबसे आम मान:
flex-start(डिफ़ॉल्ट): शुरुआत में पैक्डflex-end: अंत में पैक्डcenter: केंद्र मेंspace-around: आइटम्स के चारों ओर समान स्पेसspace-between: पहली और आखिरी आइटम किनारों पर, बाकी में समान स्पेसspace-evenly: सभी आइटम्स के बीच समान स्पेस
align-items (क्रॉस अक्ष पर अलाइनमेंट)
डिफ़ॉल्ट मान stretch है (चाइल्ड्स क्रॉस अक्ष को भरने के लिए खिंचते हैं)। अन्य मान justify-content के समान हैं लेकिन क्रॉस अक्ष पर लागू होते हैं।
चाइल्ड कंटेनर (फ्लेक्स-आइटम) प्रॉपर्टीज
order
आमतौर पर कंटेनर्स का क्रम HTML में उनके लेआउट का पालन करता है। order प्रॉपर्टी (संख्यात्मक मान) का उपयोग करके डिस्प्ले क्रम को नियंत्रित करें - उदाहरण के लिए, मोबाइल पर किसी अन्य चाइल्ड कंटेनर को पहले हाइलाइट करने के लिए।
align-self
align-self डिफ़ॉल्ट अलाइनमेंट या align-items द्वारा सेट किए गए को ओवरराइड करने की अनुमति देता है। केवल तभी काम करता है जब पैरेंट display: flex हो। मान: flex-start, flex-end, center, baseline, stretch।
निष्कर्ष
इस ट्यूटोरियल में, हमने फ्लेक्सिबल बॉक्स मॉडल की मूल बातें कवर कीं। हमने पाया कि फ्लेक्सबॉक्स में पैरेंट कंटेनर और उसके चाइल्ड कंटेनर्स के बीच एक संबंध शामिल है। पैरेंट की फ्लेक्सबॉक्स प्रॉपर्टीज पैरेंट के फ्री स्पेस में चाइल्ड कंटेनर्स के मूवमेंट को सीधे प्रभावित करती हैं।
हम flex-direction, justify-content, align-items, और flex-wrap का उपयोग पैरेंट में चाइल्ड की पोजिशन में हेरफेर करने के लिए करते हैं और हम पैरेंट पर रखे गए कुछ डिफॉल्ट्स या नियमों को ओवरराइड करने के लिए चाइल्ड पर order और align-self का उपयोग करते हैं।
