ستساعدك التعليقات الموجودة في الملف
يجب التمعن في التصميم وتحليله لمعرفة الطريقة الأمثل لتقسيمه، مثلًا سنخرج بالتحليل التالي لمثل هذا التصميم،
لربما تتساءل لماذا أقوم بإضافة حاويات للعناصر؟
سيساعدنا ذلك عند البدء بإضافة الخصائص للعناصر وترتيب الlayout
مثلًا، لاحظ أن الصورة مع جزئية النص مع أيقونة الواتساب تظهر على استقامة واحدة أي في row واحد، فينبغي أن أجمعها في كونتينر أو حاوية لإعطائها هذه الخاصية،
لاحظ أيضًا أن الاسم والمسمى الوظيفي ليست على استقامة واحدة وإنما تظهر كعمود فالعنصر الثاني يظهر فوق العنصر
الأول، فلذلك ينبغي أن أجمع هذه العناصر سوية في كونتينر لوحدها داخل الكونتينر الأب الذي سيأخذ خاصية flex-direction: row;
لجعل الحاوي يظهر كصف، سنستخدم الخاصية التالية في CSS
display: flex;
العناصر تظهر كعمود بشكل تلقائي، لكن يمكننا عمل ذلك أيضًا باستخدام خصائص flex
display: flex;
flex-direction: column;
لاحظ أن التنسيقات التي تلزمنا موجودة مسبقًا في ملف CSS، حاول أخذ نظرة تمعن فيه
لجعل العناصر متباعدة أفقيَا، أول ما يخطر في بالنا هو استخدام margins،
لكن سنواجه مشاكل عديدة عند اختلاف عرض الشاشة عندها، لذلك يوجد حل أفضل وفعّال أكثر باستخدام خصائص flex أيضًا،
وهي خصائص justify-content, align-items،
display: flex;
justify-contetn: space-between;
align-items: center;
أيضًا، لاحظ أن هذه الحاوية تأخذ ثلثي العرض، يمكننا فعل ذلك عن طريق إعطاء خاصية
.flex {
flex-grow: 2
}
للتعرف أكثر على هذه العناصر اقرأ المقال التالي: Flex Box
لاحظ أن النص(الاسم والمسمى الوظيفي) يصبح في الوسط ونحن لا نريد ذلك، وإنما نريد أن يبقى بجانب الصورة، لذلك نقوم بجمع كونتينر النص مع الصورة في كونتينر وإعطاؤه خاصية
display: flex;
ولتنصيف العناصر أفقيًا سيلزمنا الخاصية
align-items: center;
قبل:
بعد:
ممتاز! أحسنت، يبدو التصميم مثاليًا على الشاشات الكبيرة الآن،
لكن ماذا عن الشاشات الصغيرة؟
يمكننا أيضًا استخدام خصائص flex box لتحسين ذلك، مثلًا يمكننا استخدام خاصية
flex-wrap: wrap;
لجعل العناصر تنتقل للسطر التالي عندما يتعدى المحتوى عرض الشاشة، وتجنب أن تصبح مضغوطة أو يصبح لدينا scroll لليمين واليسار
لكن يتبقى مشكلة وهو أن العناصر تكون ملاصقة لبعضها عند عرض 600بيكسيل يحدث ذلك،
إذًا ماذا نفعل لحل ذلك؟
الحل السحري لدينا هو استخدام media query
سنضيف اسم كلاس جديد لكونتينر الأزرار، وسنقوم بالتالي:
@media only screen and (max-width: 600px) {
.buttons-container {
margin-top: 20px;
width: 100%;
}
}
لاحظ أن هذه الخصائص لا تتطبق إطلاقًا عند شاشة عرضها أكبر من 600 بيكسيل!
قبل:
بعد:
لاحظ أن لدينا margin-right غير مرغوب به على الشاشات الصغيرة للجزء الأعلى، هل يمكنك تحسين ذلك؟
للتعرف أكثر على media query
اقرأ في هذا الرابط Media Query and Responsive Design
مبارك! 🎉
لقد قمت بتطبيق تصميم responsive كامل! هذه الخطوات ستتكرر بشكل كبير في أية تصميمات أخرى ستقوم بتنفيذها للويب!
أتمنى أنك استمتعت بهذا التصميم واستفدت منه!
ملاحظة: container = كونتينر = حاوية = حاوي = عنصر يجمع مجموعة من العناصر