सभी मुख्य ब्राउज़र इंजन, अब सीएसएस ग्रिड और फ़्लेक्सबॉक्स में आखिरी बेसलाइन अलाइनमेंट के साथ काम करते हैं.
ब्राउज़र सहायता
- 108
- 108
- 52
- 78 जीबी में से
first
और last
कीवर्ड का इस्तेमाल करके अलाइनमेंट की सुविधा अब सभी मुख्य इंजन में उपलब्ध है. इसका मतलब है कि फ़्लेक्स या ग्रिड आइटम के ग्रुप को अलाइन करते समय, हम दूसरे विकल्प के तौर पर पिछले बेसलाइन अलाइनमेंट का इस्तेमाल कर सकते हैं.
पहला बेसलाइन अलाइनमेंट
अगर align-items
की वैल्यू को baseline
पर सेट किया जाता है, तो नतीजा पहला बेसलाइन अलाइनमेंट होगा. इसलिए, जिस आइटम को अलाइन किया जा रहा है उसकी पहली बेसलाइन (जिसे अलाइनमेंट विषय कहा गया है), ग्रुप के अन्य आइटम की पहली बेसलाइन से अलाइन होगी. इसे नीचे दिए गए उदाहरण में देखा जा सकता है, जहां पहले दो फ़्लेक्स आइटम, align-items: baseline
का इस्तेमाल करके अलाइन किए जाते हैं. इस तरह, वे बड़े टेक्स्ट से बनाई गई बेसलाइन के साथ अलाइन होते हैं. फ़ाइनल आइटम, flex-start
के साथ अलाइन है. इसलिए, यह फ़्लेक्सिबल कंटेनर की शुरुआत में अलाइन है.
पिछला बेसलाइन अलाइनमेंट
किसी आइटम को last baseline
वैल्यू के साथ अलाइन करने पर, उस आइटम की आखिरी बेसलाइन, बेसलाइन शेयर करने वाले उस ग्रुप की आखिरी बेसलाइन के साथ अलाइन होगी जिसका वह हिस्सा है. नीचे दिए गए उदाहरण में, पिछले बेसलाइन अलाइनमेंट के बारे में बताया गया है, जिसमें पहला सुविधाजनक आइटम बड़े आइटम में टेक्स्ट की आखिरी लाइन के साथ अलाइन है. इस ग्रुप का आखिरी आइटम, flex-end
के अलाइन है, जो फ़्लेक्सिबल कंटेनर के आखिर में है.
फ़ॉलबैक अलाइनमेंट
अगर अलाइनमेंट सब्जेक्ट में अलाइन करने के लिए बेसलाइन शेयर करने वाला ग्रुप नहीं है, तो फ़ॉलबैक अलाइनमेंट का इस्तेमाल किया जाएगा. baseline
और first baseline
के लिए, फ़ॉलबैक अलाइनमेंट start
है और last baseline
के लिए, फ़ॉलबैक अलाइनमेंट end
है.