सीएसएस फ़्लेक्सिबल बॉक्स लेआउट स्पेसिफ़िकेशन के पिछले वर्शन में, एब्सोल्यूट पोज़िशन वाले चाइल्ड एलिमेंट की स्टैटिक पोज़िशन को इस तरह सेट किया गया था जैसे कि वे फ़्लेक्स आइटम हों जिनका साइज़ 0px x 0px है. स्पेसिफ़िकेशन का नया वर्शन, इन एलिमेंट को फ़्लो से पूरी तरह हटा देता है. साथ ही, अलाइन और जस्टिफ़ाई प्रॉपर्टी के आधार पर स्टैटिक पोज़िशन सेट करता है. फ़िलहाल, डेस्कटॉप और Android के लिए Edge और Opera 39 पर यह सुविधा काम करती है.
उदाहरण के लिए, आइए इस एचटीएमएल में पोज़िशनिंग के कुछ व्यवहार लागू करें.
<div class="container">
<div>
<p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
</div>
</div>
हम कुछ ऐसा जोड़ेंगे:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
Chrome 52 या इसके बाद के वर्शन में, नेस्ट किया गया <div>, कंटेनर <div> में पूरी तरह से बीच में दिखेगा.
जिन ब्राउज़र पर यह सुविधा काम नहीं करती है उनमें हरे बॉक्स का सबसे ऊपर बायां कोना, लाल बॉक्स के सबसे ऊपर बीच में दिखेगा.
अगर आपको Chrome या किसी दूसरे ब्राउज़र में इसे आज़माना है, तो हमारा सैंपल डाउनलोड करें या लाइव डेमो पर जाएं.