फ्लेक्स गुणों का उपयोग करके फ्लेक्स फ़ूटर में टेक्स्ट को सही स्थिति में लाना

फ्लोट प्रॉपर्टी का उपयोग करके फ्लेक्स कंटेनर के भीतर टेक्स्ट को राइट-एलाइन करने का प्रयास करते समय , आपको समस्याओं का सामना करना पड़ सकता है। ऐसा इसलिए है क्योंकि फ्लोट प्रॉपर्टी फ्लेक्स कंटेनरों के भीतर समर्थित नहीं है।

फ्लेक्सबॉक्स विनिर्देश के अनुसार, "फ्लोट और क्लियर फ्लेक्स आइटम की फ्लोटिंग या निकासी नहीं बनाते हैं, और इसे प्रवाह से बाहर नहीं ले जाते हैं। " इसके बजाय, यह अपनी सामग्री के लिए एक नया "फ्लेक्स फ़ॉर्मेटिंग संदर्भ" स्थापित करता है, जिसका अर्थ है कि फ़्लोट्स को अनदेखा कर दिया जाता है और हाशिये कंटेनर की सामग्री के साथ ढहते नहीं हैं। इसके बजाय फ्लेक्स गुणों का उपयोग करें। जस्टिफ़ाई-कंटेंट प्रॉपर्टी का उपयोग कंटेनर के भीतर तत्वों को क्षैतिज रूप से संरेखित करने के लिए किया जा सकता है। उदाहरण के लिए, दिए गए कोड स्निपेट में:

पादलेख { प्रदर्शन: फ्लेक्स; औचित्य-सामग्री: फ्लेक्स-एंड; }

footer {
    display: flex;
    justify-content: flex-end;
}