ब्लॉक और टेबल लेआउट में कॉन्टेंट अलाइन करने के लिए सहायता

Chrome 123 में, ब्लॉक और टेबल लेआउट पर, सीएसएस बॉक्स अलाइनमेंट की align-content प्रॉपर्टी का इस्तेमाल किया जा सकता है. इससे, फ़्लेक्स या ग्रिड लेआउट बनाने के बिना, ब्लॉक के डायरेक्शन को अलाइन किया जा सकेगा. हालांकि, अगर आपने इन लेआउट के तरीकों के अलावा align-content का इस्तेमाल किया है, तो आपको अपनी सीएसएस को अपडेट करना पड़ सकता है. ऐसा इसलिए, क्योंकि अब यह लागू हो जाएगा.

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 125.
  • Safari: 17.4.

align-content फ़्लेक्स और ग्रिड लेआउट में

ऐसा हो सकता है कि आपने फ़्लेक्स आइटम या ग्रिड ट्रैक को अलाइन करने के लिए, align-content का इस्तेमाल किया हो. किसी फ़्लेक्स लेआउट में, क्रॉस ऐक्सिस पर फ़्लेक्स आइटम को अलाइन करने के लिए, फ़्लेक्स कंटेनर पर align-content प्रॉपर्टी का इस्तेमाल किया जाता है. नीचे दिए गए उदाहरण में, इसकी वैल्यू space-between है. इसलिए, यह फ़्लेक्स कंटेनर में उपलब्ध स्पेस को फ़्लेक्स लाइनों के बीच बांट रहा है.

align-content प्रॉपर्टी, फ़्लेक्स आइटम की पंक्तियों के बीच स्पेस देती है. ऐसा इसलिए होता है, क्योंकि फ़्लेक्स कंटेनर में क्रॉस ऐक्सिस में खाली जगह होती है.

किसी आइटम को वर्टिकल तौर पर बीच में रखना

align-content का इस्तेमाल, किसी आइटम को कंटेनर में वर्टिकल तौर पर सेंटर करने के लिए किया जाता है. ऐसा करने के लिए, align-content: center के साथ display: flex का इस्तेमाल करें. इससे आइटम, फ़्लेक्स आइटम बन जाता है. साथ ही, फ़्लेक्स आइटम के लिए डिफ़ॉल्ट तौर पर लागू होने वाले अन्य नियम भी लागू हो जाते हैं. नीचे दिए गए उदाहरण में, align-content: center की मदद से हेडिंग को वर्टिकल तौर पर बीच में रखा गया है. इस वजह से, कॉन्टेंट में फ़िट होने के लिए आइटम छोटा हो जाता है. इसलिए, आपको आइटम पर flex-grow: 1 लागू करना होगा.

align-content प्रॉपर्टी, हेडिंग को फ़्लेक्स कंटेनर में वर्टिकल तौर पर बीच में रखती है.

ब्लॉक लेआउट के लिए align-content उपलब्ध होने पर, आपको वर्टिकल अलाइनमेंट हासिल करने में मदद मिलेगी. इसके लिए, प्रॉपर्टी के काम करने के लिए फ़्लेक्स लेआउट बनाने की ज़रूरत नहीं होगी. आइटम, ब्लॉक आइटम बना रहता है, इसलिए किसी और प्रॉपर्टी की ज़रूरत नहीं होती. आइटम में सिर्फ़ अलाइनमेंट में बदलाव होता है.

align-content प्रॉपर्टी, हेडिंग को ब्लॉक कंटेनर में वर्टिकल तौर पर बीच में रखती है. इसके लिए, Chrome 123 या Safari 17.4 या इसके बाद के वर्शन की ज़रूरत होती है.

ब्लॉक लेआउट में align-content के साथ काम करने की जांच करना

माफ़ करें, ब्लॉक लेआउट में align-content के काम करने की जांच नहीं की जा सकती. align-content, फ़्लेक्स और ग्रिड लेआउट में लंबे समय से काम कर रहा है. इसलिए, @supports के साथ सुविधा क्वेरी का इस्तेमाल करने पर, हमेशा 'सही' दिखेगा. यह वही स्थिति है जो फ़्लेक्सबॉक्स में gap प्रॉपर्टी के साथ हुई थी. सीएसएस वर्किंग ग्रुप, इस तरह के कुछ हिस्सों को लागू करने के लिए समाधान ढूंढ रहा है.

अपनी साइटों पर अनचाहे अलाइनमेंट की जांच करना

align-content प्रॉपर्टी को कई सालों से स्पेसिफ़िकेशन में, ब्लॉक लेआउट पर काम करने के तौर पर परिभाषित किया गया है. इन कॉन्टेक्स्ट के अलावा, किसी भी ब्राउज़र में align-content काम नहीं करता. इसलिए, यह कुछ नहीं करता. हालांकि, अगर आपने प्रॉपर्टी को किसी ऐसे कॉन्टेंट में जोड़ा है जो फ़्लेक्स या ग्रिड कंटेनर नहीं है, तो Chrome 123 से इसका असर दिखने लगेगा. align-content के इस्तेमाल के लिए अपनी सीएसएस खोजें. अगर आपके लिए ऐसा हो सकता है, तो अपनी साइटों और ऐप्लिकेशन की जांच करने के लिए बीटा वर्शन का इस्तेमाल करें.