في هذا الثريد بنتعلم كيف نسوي تصميم متجاوب (responsive) باستخدام خاصية flexbox اللي هي flex-wrap.
كود HTML:
نحتاج div نعطيه كلاس مثلاً container ونحط داخله ٣ div لهم كلاس item.
نحتاج div نعطيه كلاس مثلاً container ونحط داخله ٣ div لهم كلاس item.
كود CSS:
١- <body>:
بالنسبة ل body استخدمت flexbox والخاصيتين “justify-content”، "align-items" عشان اخلي محتوى الصفحة بالنص.
١- <body>:
بالنسبة ل body استخدمت flexbox والخاصيتين “justify-content”، "align-items" عشان اخلي محتوى الصفحة بالنص.
٢-div الأب اللي كلاسه container:
استخدمت flexbox وخاصيته flex-wrap. دور الخاصية هي ان الأبناء (div اللي كلاسه item) اذا مافي مساحة كافية عشان يكونون في نفس الصف بينتقلون للصف الثاني.
استخدمت flexbox وخاصيته flex-wrap. دور الخاصية هي ان الأبناء (div اللي كلاسه item) اذا مافي مساحة كافية عشان يكونون في نفس الصف بينتقلون للصف الثاني.
٣-div الأبناء اللي كلاسهم item:
استخدمت خاصية flex اللي تجمع ٣ خصائص:
١- flex-grow: عشان div تكبر إذا في مساحة كبيرة.
٢-flex-shrink: عشان div تصغر إذا مافي مساحة.
٣-flex-basis: اللي تحدد حجم كل div...
يتبع
استخدمت خاصية flex اللي تجمع ٣ خصائص:
١- flex-grow: عشان div تكبر إذا في مساحة كبيرة.
٢-flex-shrink: عشان div تصغر إذا مافي مساحة.
٣-flex-basis: اللي تحدد حجم كل div...
يتبع
ولما تكون المساحة الباقية أقل من ان div تكون كلهم بسطر واحد رح تنتقل div للسطر الثاني.
كامل الكود:
codepen.io
codepen.io
وبكذا وصلنا لنهاية الثريد. لاتنسون المشاركة لإفادة الغير وشكراً💙
جاري تحميل الاقتراحات...