رتبها

فاطمة العمودي 🌻 | UI/UX Designer

11 تغريدة Apr 02, 2023

واحدة من المشاكل الشائعة في تصميم وبرمجة البطاقات هو اختلاف طول البطاقة لتأثرها بطول المحتوى. خلونا نعرف أسهل طريقة لحل هذه المشكلة 🔎
ثريد 🧵

بالبداية ممكن يخطر على بالكم ليش ما نحدد طول (height) البطاقة بقيمة ثابتة فتصير البطاقات كلها نفس طول اكبر بطاقة لكن هذا ممكن يحل المشكلة مؤقتاً لكن اذا تغيير حجم الشاشة بزيادة او نقصان التغيير رح يكون له تأثير على طول البطاقة لاختلاف المساحة المتاحة
يتبع ⤵️

و بالتالي القيمة الثابتة اللي وضعناها ممكن تسبب ان المحتوى يكون اكبر من البطاقة (overflow)

نبدأ بكود HTML, يتكون من div له كلاس اسمه container اللي يحيط بالبطاقات وكل بطاقة لها كلاس اسمه card.

في كود CSS مستخدمين فيه خاصية flexbox وهي من الخصائص المهم تعلمها. احنا نحتاج البطاقات تكون جنب بعض في سطر واحد فخلينا قيمة flex-direction: row.
خاصية flex-wrap: wrap معناته اذا ما في مساحة في الشاشة تكفي البطاقات في سطر واحد ممكن احد البطاقات تنتقل للسطر الثاني.

خاصية justify-content: space-between بتخلي في مسافة بين البطاقات واللي بيحدد قيمة المسافة هي قيمة gap ولها عدة قيم اخرى شرحها في الصورة.

خاصية align-items: center بتخلي البطاقات تتوسط في منتصفها ولها ايضاً قيم اخرى موضحة في الصورة.

من هنا الصورة وضحت ان سبب المشكلة هو انا استخدمنا خاصية align-items: center فعشان نحل المشكلة وتصير البطاقات بنفس الطول دائماً بنخلي قيمة align-items: stretch.