CSS में फ्लेक्स गुण आपको आइटम को अधिक लचीले और प्रतिक्रियाशील रूप से संरेखित करने की अनुमति देते हैं। यह तब उपयोगी होता है जब आप चाहते हैं कि आपके HTML तत्व वेब ब्राउज़र के अंदर अधिक प्रतिक्रियाशील हों।
यह लेख इस बारे में बताएगा कि आप कुछ फ्लेक्स गुणों का उपयोग कैसे कर सकते हैं। इसमें फ्लेक्स-दिशा, औचित्य-सामग्री, संरेखण-स्वयं, संरेखित-आइटम, संरेखण-सामग्री और अंतराल गुण शामिल हैं।
CSS फ्लेक्स डिस्प्ले कैसे सेट करें
एक उदाहरण संरचना जिसे आप एक्सप्लोर करने के लिए उपयोग कर सकते हैं फ्लेक्सबॉक्स की मूल बातें सिंगल पैरेंट डिव के नीचे चाइल्ड डिव का एक सेट है। नीचे दिए गए कोड में, एक मुख्य "पैरेंट" डिव है। तीन चाइल्ड डिव उन वस्तुओं का प्रतिनिधित्व करते हैं जिन्हें आप फ्लेक्स गुणों का उपयोग करके संरेखित कर सकते हैं।
किसी भी फ्लेक्स स्टाइल को काम करने के लिए, आपको जोड़ना होगा प्रदर्शन: फ्लेक्स पैरेंट फ्लेक्स कंटेनर के लिए संपत्ति।
माता पिता {
प्रदर्शन: फ्लेक्स;
}
फ्लेक्स के बिना, चाइल्ड डिव पेज के नीचे कॉलम फॉर्मेशन में एक के बाद एक प्रदर्शित होते हैं।
इस सेटअप का उदाहरण देखने के लिए, इसमें दिए गए कोड को देखें और चलाएं कोडपेन स्निपेट.
लेआउट दिशा को कैसे नियंत्रित करें
फ्लेक्स-दिशा संपत्ति बाल वस्तुओं की पंक्ति या स्तंभ दिशा निर्धारित करती है।
फ्लेक्स-दिशा संपत्ति के विकल्पों में शामिल हैं:
फ्लेक्स-दिशा: पंक्ति | कॉलम | रो-रिवर्स | कॉलम-रिवर्स
आपको उन आइटम्स के आस-पास एक पैरेंट कंटेनर जोड़ना होगा, जिन्हें आप अलाइन करना चाहते हैं।
एचटीएमएल:
सीएसएस:
लाल {पृष्ठभूमि-रंग: लाल; }
नारंगी {पृष्ठभूमि-रंग: नारंगी; }
.पीला {पृष्ठभूमि-रंग: पीला; }
.हरा {पृष्ठभूमि-रंग: हरा;}
.नीला {पृष्ठभूमि-रंग: नीला; }
बैंगनी {पृष्ठभूमि-रंग: बैंगनी; }
.पैरेंट डिव {
चौड़ाई: 40 पीएक्स;
ऊंचाई: 40 पीएक्स;
}
फ्लेक्स-दिशा संपत्ति को पैरेंट फ्लेक्स कंटेनर पर लागू करें। यह चाइल्ड डिव आइटम को संरेखित करेगा।
माता पिता {
चौड़ाई: 300 पीएक्स;
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: पंक्ति;
}
कई फ्लेक्स गुण मुख्य अक्ष और क्रॉस अक्ष की अवधारणा को संदर्भित करते हैं। जब फ्लेक्स-दिशा है पंक्ति, मुख्य अक्ष क्षैतिज दिशा का प्रतिनिधित्व करता है, और क्रॉस अक्ष ऊर्ध्वाधर का प्रतिनिधित्व करता है। कॉलम का मान इन अक्षों को स्विच करता है।
इसमें फ्लेक्स-दिशा संपत्ति के लिए कोड देखें कोडपेन स्निपेट कुछ उदाहरण देखने के लिए।
क्रॉस एक्सिस के साथ आइटम कैसे संरेखित करें
संरेखित-आइटम संपत्ति क्रॉस अक्ष के साथ वस्तुओं के संरेखण को नियंत्रित करती है। डिफ़ॉल्ट फ्लेक्स-दिशा के लिए, पंक्ति, संरेखण-आइटम आइटम के लंबवत संरेखण को नियंत्रित करते हैं।
संरेखण-आइटम संपत्ति के विकल्पों में शामिल हैं:
संरेखित-आइटम: फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | संरेखित-आइटम | फैलाव
अपने बच्चों को संरेखित करने के लिए पैरेंट कंटेनर में align-items प्रॉपर्टी जोड़ें।
माता पिता {
प्रदर्शन: फ्लेक्स;
संरेखित-आइटम: फ्लेक्स-स्टार्ट;
}इसके अतिरिक्त, आप आधार रेखा का उपयोग करके आइटम को संरेखित करना चुन सकते हैं। डिफ़ॉल्ट रूप से, बेसलाइन विकल्प सभी आइटम्स को आइटम्स के आधार पर संरेखित करता है।
आप यह भी चुन सकते हैं कि आधार रेखा कहाँ से शुरू होती है, जैसे शीर्ष (पहली आधार रेखा) या नीचे (अंतिम आधार रेखा)।
संरेखित-आइटम: आधार रेखा | पहली आधार रेखा | अंतिम आधार रेखा;संरेखण-आइटम के लिए: काम करने के लिए आधार रेखा, सुनिश्चित करें कि प्रत्येक आइटम की एक अलग ऊंचाई या चौड़ाई है (आपके द्वारा उपयोग किए जा रहे अक्ष के आधार पर)।
इसमें align-items प्रॉपर्टी के लिए कोड देखें कोडपेन स्निपेट कुछ उदाहरण देखने के लिए।
व्यक्तिगत वस्तुओं पर संरेखण को कैसे ओवरराइड करें
आप का उपयोग कर सकते हैं संरेखित करें-स्वयं पैरेंट कंटेनर की किसी भी संरेखण-आइटम स्टाइल को ओवरराइड करने के लिए संपत्ति। इसका मतलब है कि आप एक अलग आइटम पर एक अलग फ्लेक्स संरेखण सेट कर सकते हैं।
अलाइन-सेल्फ प्रॉपर्टी के विकल्पों में शामिल हैं:
संरेखित करें-स्व: ऑटो | फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | केंद्र | आधार रेखा | फैलावउदाहरण के लिए कहें कि पैरेंट कंटेनर में "पंक्ति" पर एक फ्लेक्स-दिशा स्टाइल सेट है।
माता पिता {
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: पंक्ति;
}आप अलग-अलग आइटम पर align-self प्रॉपर्टी लागू कर सकते हैं। अलग-अलग आइटम align-self प्रॉपर्टी की स्टाइलिंग का उपयोग करेगा, और आइटम को पैरेंट कंटेनर में केंद्रित करेगा।
इसमें align-self प्रॉपर्टी के लिए कोड देखें कोडपेन स्निपेट कुछ उदाहरण देखने के लिए।
क्रॉस एक्सिस में लाइनों को कैसे वितरित करें
संरेखित सामग्री संपत्ति बच्चों को लंबवत अक्ष के साथ संरेखित करती है। यह उन वस्तुओं के बीच की दूरी को भी निर्धारित कर सकता है जो कई पंक्तियों में हैं।
संरेखण-सामग्री संपत्ति के विकल्पों में शामिल हैं:
संरेखित-सामग्री: फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | केंद्र | खिंचाव | अंतरिक्ष के बीच | अंतरिक्ष के आसपासपैरेंट फ्लेक्स कंटेनर में align-content प्रॉपर्टी जोड़ें। अलाइन-कंटेंट प्रॉपर्टी तभी काम करेगी जब फ्लेक्स-रैप प्रॉपर्टी सेट हो। फ्लेक्स-रैप जोड़ें: पैरेंट कंटेनर में लपेटें, और आइटम्स को एक से अधिक लाइन पर बाध्य करने के लिए पैरेंट डिव की चौड़ाई कम करें।
माता पिता {
फ्लेक्स-रैप: रैप;
प्रदर्शन: फ्लेक्स;
संरेखित-सामग्री: फ्लेक्स-स्टार्ट;
चौड़ाई: 180px;
}इसमें align-content प्रॉपर्टी के लिए कोड देखें कोडपेन स्निपेट कुछ उदाहरण देखने के लिए।
मुख्य अक्ष पर आइटम कैसे संरेखित करें
औचित्य-सामग्री प्रॉपर्टी चाइल्ड आइटम्स में राइट, लेफ्ट या सेंटर अलाइनमेंट जोड़ती है। यह सामग्री को उचित ठहराते समय उनके बीच रिक्त स्थान जोड़कर वस्तुओं को फैलाता है।
औचित्य-सामग्री संपत्ति के विकल्पों में शामिल हैं:
औचित्य-सामग्री: फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | केंद्र | अंतरिक्ष के बीच | अंतरिक्ष के आसपास | अंतरिक्ष-समानवे आइटम लपेटें जिन्हें आप पैरेंट फ्लेक्स कंटेनर के अंतर्गत संरेखित करना चाहते हैं।
एचटीएमएल:
सीएसएस:
लाल {पृष्ठभूमि-रंग: लाल; }
.हरा {पृष्ठभूमि-रंग: हल्का हरा; }
.नीला {पृष्ठभूमि-रंग: नीला; }पैरेंट फ्लेक्स कंटेनर में जस्टिफाई-कंटेंट प्रॉपर्टी जोड़ें।
माता पिता {
चौड़ाई: 300 पीएक्स;
प्रदर्शन: फ्लेक्स;
औचित्य-सामग्री: फ्लेक्स-स्टार्ट;
}औचित्य-सामग्री संपत्ति सीएसएस बॉक्स संरेखण विनिर्देश में सूचीबद्ध मूल्यों का भी समर्थन करती है। इसमें "प्रारंभ", "अंत", "बाएं" और "दाएं" जैसे मान शामिल हैं। कुछ ब्राउज़र इनका समर्थन नहीं करते हैं।
औचित्य-सामग्री संपत्ति में एक "सुरक्षित" कीवर्ड भी होता है जिसका आप उपयोग कर सकते हैं। यह सुनिश्चित करता है कि तत्व मूल कंटेनर की सीमा के भीतर रहने का प्रयास करते हैं।
इसका उपयोग डेटा हानि को रोकने के लिए भी किया जाता है, उस स्थिति में जहां आप एक लंबा शब्द केंद्रित करते हैं। सुरक्षित कीवर्ड का उपयोग छोटे डिव को पहले और अंतिम अक्षरों को काटने से रोकता है।
माता पिता {
प्रदर्शन: फ्लेक्स;
औचित्य-सामग्री: सुरक्षित केंद्र;
}
सुरक्षित कीवर्ड भी कुछ ब्राउज़रों तक ही सीमित है। आप संगतता की जांच कर सकते हैं क्या मैं उपयोग कर सकता हूँ.
इसमें औचित्य-सामग्री संपत्ति के लिए कोड देखें कोडपेन स्निपेट कुछ उदाहरण देखने के लिए।
वस्तुओं के बीच रिक्ति कैसे जोड़ें
अंतर संपत्ति आपको वस्तुओं के बीच एक मात्रा में स्थान जोड़ने की अनुमति देती है। यह इनमें से एक है नई CSS सुविधाएँ जो आपको एक प्रतिक्रियाशील लेआउट बनाने में मदद कर सकती हैं.
गैप प्रॉपर्टी को पैरेंट फ्लेक्स कंटेनर में लागू करें।
माता पिता {
प्रदर्शन: फ्लेक्स;
अंतर: 70px;
}यदि आप एक गैप जोड़ते हैं जो आइटम की लंबाई को पैरेंट की चौड़ाई से अधिक करने के लिए बाध्य करता है, तो आइटम पंक्ति के अंदर प्रयास करने और फिट होने के लिए सिकुड़ेंगे।
माता पिता {
चौड़ाई: 300 पीएक्स;
अंतर: 120px;
}यदि आप flex-wrap: Wrap का उपयोग आइटम को एक नई लाइन पर धकेलने के लिए करते हैं, तो गैप राशि पंक्तियों के बीच के स्थान पर भी लागू होगी।
माता पिता {
चौड़ाई: 300 पीएक्स;
फ्लेक्स-रैप: रैप;
अंतर: 120px;
}इसके अतिरिक्त, आप भी सेट कर सकते हैं पंक्ति अंतराल और कॉलम-गैप गुण। दोबारा, आपको इन्हें पैरेंट फ्लेक्स कंटेनर पर लागू करना होगा।
पंक्ति-अंतराल गुण प्रत्येक पंक्ति के बीच का स्थान निर्धारित करता है। कॉलम-गैप प्रॉपर्टी प्रत्येक कॉलम के बीच की जगह निर्धारित करती है।
माता पिता {
पंक्ति-अंतराल: 120px;
}
माता पिता {
कॉलम-गैप: 120px;
}
इसमें गैप प्रॉपर्टी के लिए कोड देखें कोडपेन स्निपेट कुछ उदाहरण देखने के लिए।
अपनी वेबसाइट पर अधिक फ्लेक्स गुणों का उपयोग करना
उम्मीद है, अब आप विभिन्न फ्लेक्स गुणों से परिचित हो गए हैं जिनका उपयोग आप अपने वेबपेज पर आइटम्स को संरेखित करने के लिए कर सकते हैं। इसमें शामिल है कि आप फ्लेक्स-दिशा, औचित्य-सामग्री, संरेखण-स्वयं, संरेखित-आइटम, संरेखण-सामग्री और अंतराल गुणों का उपयोग कैसे कर सकते हैं।
फ्लेक्सबॉक्स एक शक्तिशाली लेआउट तकनीक है, लेकिन यह सीएसएस का सिर्फ एक छोटा सा हिस्सा है। आप नए CSS गुणों, स्वच्छ कोडिंग तकनीकों और CSS अनुकूलन के लिए उपयोग किए जाने वाले टूल के बारे में भी जान सकते हैं।
सीएसएस फाइलों की जांच, सफाई और अनुकूलन के लिए 11 उपयोगी उपकरण
आगे पढ़िए
संबंधित विषय
- प्रोग्रामिंग
- सीएसएस
- वेब डिजाइन
लेखक के बारे में
शर्लिन एमयूओ में टेक राइटर हैं और सॉफ्टवेयर डेवलपमेंट में भी पूर्णकालिक काम करती हैं। उसके पास आईटी स्नातक है और उसे गुणवत्ता आश्वासन और विश्वविद्यालय शिक्षण में पिछला अनुभव है। शर्लिन को गेमिंग और पियानो बजाना बहुत पसंद है।
हमारे समाचार पत्र के सदस्य बनें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें
