تداخل العناصر المرنة

المشكلة

عرض مجموعة من عدد غير معروف من أوراق اللعب أفقيًا يمكن أن يؤدي إلى تداخلها إذا تجاوزت عرضًا معينًا. يمكن استخدام المربعات المرنة لهذا الغرض، لكن التحكم في الحجم والتداخل قد يكون أمرًا صعبًا.

الحل

يتضمن الحل تعيين خصائص CSS محددة لتحقيق التأثير المطلوب. فيما يلي تفصيل:

• الحاوية : تستخدم حاوية .cards flexbox (العرض: flex) وتحدد الحد الأقصى للعرض (الحد الأقصى للعرض: 35em) لضمان بقاء البطاقات داخلها حدود محددة.
• التحكم في الفائض: يقوم عنصر .cardWrapper بتغليف كل بطاقة ويستخدم للتحكم فائضه. التجاوز: الخاصية المخفية تخفي في البداية أي بطاقات زائدة.
• التمرير والطفل الأخير : عند التمرير فوق غلاف البطاقة أو إذا كان الطفل الأخير، يتم تطبيق خاصية التجاوز: مرئي للسماح بـ البطاقات الفائضة لتصبح مرئية. وهذا يضمن أن تكون البطاقات ذات الصلة فقط مرئية في أي وقت.
• تصميم البطاقة: يحتوي عنصر .card على عرض ثابت وحد أدنى للعرض (10em) لضمان عدم انكماشها. يمكن تخصيص الارتفاع والحدود ولون الخلفية حسب الحاجة.