फ्लेक्स कंटेनर आइटम संरेखण बाएं

एक मोबाइल मेनू में, फ्लेक्सबॉक्स का उपयोग करके सोशल मीडिया आइकन की एक सूची व्यवस्थित की जाती है। समान दूरी सुनिश्चित करने के लिए, justify-content: space-round का उपयोग किया जाता है। हालाँकि, जब पंक्तियों में तीन से अधिक आइटम होते हैं, तो वे बाएँ-संरेखित होने के बजाय केंद्र-संरेखित होती हैं। प्रत्येक सिरे पर आधे आकार के रिक्त स्थान के साथ वस्तुओं को समान रूप से वितरित करता है। जब शेष स्थान नकारात्मक होता है या एक वस्तु मौजूद होती है, तो यह केंद्र की तरह व्यवहार करता है। इसके परिणामस्वरूप दिए गए परिदृश्य में अवांछित केंद्र-संरेखित व्यवहार होता है।

Solution

रैप पर छोड़ी गई वस्तुओं को संरेखित करने के लिए, justify-content: space-between है उत्तर। यह भिन्नता समान वितरण सुनिश्चित करती है, लेकिन नकारात्मक खाली स्थान या पंक्ति में एकल आइटम के मामले में, यह फ्लेक्स-स्टार्ट की तरह व्यवहार करती है, जो आइटम को बाएँ-संरेखित करती है।

नमूना कोड

जस्टिफाई-कंटेंट: स्पेस-अराउंड को जस्टिफाई-कंटेंट: स्पेस-बीच के साथ बदलने से संरेखण समस्या का समाधान होता है। इसके अतिरिक्त, स्पेस-अराउंड के अंतर प्रभाव की नकल करने के लिए कंटेनर में बाएँ और दाएँ पैडिंग को जोड़ा जा सकता है।

आगे के विचार

एक संभावित चुनौती जो उभर सकती है वह यह है कि कब दो वस्तुएँ कंटेनर के विपरीत सिरों पर लपेटें और संरेखित करें। हालाँकि, इसे हल करना पूरी तरह से एक अलग मामला है।