ओवरलैपिंग फ्लेक्स आइटम

समस्या

अज्ञात संख्या में ताश के पत्तों का एक सेट क्षैतिज रूप से प्रदर्शित करने से वे एक निश्चित चौड़ाई से अधिक होने पर ओवरलैपिंग का कारण बन सकते हैं। इस उद्देश्य के लिए फ्लेक्स बॉक्स का उपयोग किया जा सकता है, लेकिन आकार और ओवरलैप को नियंत्रित करना मुश्किल हो सकता है।

समाधान

समाधान में वांछित प्रभाव प्राप्त करने के लिए विशिष्ट सीएसएस गुण सेट करना शामिल है। यहां विवरण दिया गया है:

• कंटेनर: .कार्ड्स कंटेनर फ्लेक्सबॉक्स (डिस्प्ले: फ्लेक्स) का उपयोग करता है और अधिकतम चौड़ाई (अधिकतम-चौड़ाई: 35em) सेट करता है ताकि यह सुनिश्चित हो सके कि कार्ड अंदर रहें। एक विशिष्ट सीमा।
• अतिप्रवाह नियंत्रण: .cardWrapper तत्व प्रत्येक कार्ड को लपेटता है और उसके अतिप्रवाह को नियंत्रित करने के लिए उपयोग किया जाता है। ओवरफ्लो: छुपी हुई संपत्ति शुरू में किसी भी ओवरफ्लो हो रहे कार्ड को छुपाती है। दृश्यमान होने के लिए अतिप्रवाहित कार्ड। यह सुनिश्चित करता है कि किसी भी समय केवल संबंधित कार्ड ही दिखाई दें।
• कार्ड स्टाइलिंग: .कार्ड तत्व की एक निश्चित चौड़ाई और न्यूनतम चौड़ाई (10em) होती है ताकि यह सुनिश्चित किया जा सके कि वे सिकुड़ें नहीं। ऊंचाई, बॉर्डर और पृष्ठभूमि का रंग आवश्यकतानुसार अनुकूलित किया जा सकता है।