फ्लेक्सबॉक्स में फ्लेक्स-स्टार्ट बनाम बेसलाइन संरेखण

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

बेसलाइन संरेखण

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

बेसलाइन संरेखण का उपयोग करते समय, पंक्ति में सबसे ऊंची वस्तु बेसलाइन की स्थिति निर्धारित करती है। फ्लेक्स आइटम को संरेखित किया जाता है ताकि उनकी बेसलाइन संरेखित हो, इसके शुरुआती मार्जिन किनारे से सबसे दूर वाले आइटम को उस किनारे के सामने फ्लश रखा जाए।

निम्नलिखित कोड पर विचार करें :.फ्लेक्स-कंटेनर { प्रदर्शन: फ्लेक्स; संरेखित-आइटम: बेसलाइन; औचित्य-सामग्री: बीच में स्थान; } .फ्लेक्स-आइटम { पृष्ठभूमि-रंग: हरा; चौड़ाई: 110px; न्यूनतम-ऊंचाई: 100px; पैडिंग: 5px; पाठ-संरेखण: केंद्र; }

इस कोड के साथ, फ्लेक्स आइटम को उनकी बेसलाइन का उपयोग करके संरेखित किया जाता है। निम्नलिखित आउटपुट उत्पन्न होता है:

ध्यान दें कि भले ही फ्लेक्स आइटम की सामग्री आकार में भिन्न हो, वे सभी आधार रेखा के साथ संरेखित हैं।