सीएसएस फ़्लेक्सिबल बॉक्स के पिछले वर्शन लेआउट स्पेसिफ़िकेशन में, बच्चों की स्टैटिक पोज़िशन तय की जाती है, क्योंकि वे 0 पिक्सल x 0 पिक्सल साइज़ वाले फ़्लेक्स आइटम थे. खास जानकारी का नया वर्शन, इन्हें पूरी तरह से हटा देता है. साथ ही, अलाइनमेंट और प्रॉपर्टी के नियमों के हिसाब से स्टैटिक पोज़िशन सेट करता है. यह लेख लिखते समय, डेस्कटॉप के लिए Edge और Opera 39 और Android पहले से ही काम करते हैं.
उदाहरण के लिए, आइए नीचे दिए गए एचटीएमएल पर कुछ पोज़िशनिंग व्यवहार लागू करते हैं.
<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 या किसी दूसरे ब्राउज़र पर खुद आज़माना है, तो हमारा सैंपल डाउनलोड करें या लाइव डेमो पर जाएं.