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

लचीले लेआउट में, फ्लेक्स-स्टार्ट क्रॉस-अक्ष की शुरुआत में आइटम को संरेखित करता है, जबकि बेसलाइन उन्हें उनकी सामग्री की आधार रेखा के साथ संरेखित करता है।

आधार रेखा संरेखण

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

दृश्य अंतर

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

निम्नलिखित कोड पर विचार करें स्निपेट:

.फ्लेक्स-कंटेनर { संरेखित-आइटम: बेसलाइन; ... } ... .फ्लेक्स-आइटम { फ़ॉन्ट-आकार: 2em; ... } ... .फ्लेक्स-आइटम.आइटम2 { फ़ॉन्ट-आकार: 7em; }

सबसे बड़े फ़ॉन्ट आकार वाला आइटम, "बी," पंक्ति के लिए आधार रेखा निर्धारित करेगा। अन्य आइटम "बी" की बेसलाइन के साथ संरेखित होंगे, जैसा कि नीचे दी गई छवि में दर्शाया गया है।

[बेसलाइन संरेखण का उपयोग करके अलग-अलग ऊंचाई पर संरेखित फ्लेक्स आइटम की छवि]

महत्वपूर्ण नोट

.flex-container {
  align-items: baseline;
  ...
}
...
.flex-item {
  font-size: 2em;
  ...
}
...
.flex-item.item2 {
  font-size: 7em;
}

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