Chrome 123 से, ब्लॉक और टेबल लेआउट पर, सीएसएस बॉक्स अलाइनमेंट
की align-content प्रॉपर्टी का इस्तेमाल किया जा सकता है. इससे ब्लॉक की दिशा अलाइनमेंट के लिए, फ़्लेक्स या ग्रिड लेआउट बनाने की ज़रूरत नहीं पड़ेगी. हालांकि, अगर आपने इन लेआउट तरीकों के अलावा, align-content का इस्तेमाल किया है, तो आपको अपना सीएसएस अपडेट करना पड़ सकता है. ऐसा इसलिए, क्योंकि अब यह लागू हो जाएगा.
ब्राउज़र सहायता
- 123
- 123
- 125
- 78 जीबी में से
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 के इस्तेमाल के लिए अपनी सीएसएस खोजें. साथ ही, अगर आपके लिए ऐसा है, तो अपनी साइटों और ऐप्लिकेशन की जांच करने के लिए बीटा वर्शन का इस्तेमाल करें.