الحاوية المرنة في الاليمنتور
الهدف من الدرس :
📦 النقطة الأولى :
باستخدام خاصية flex-grow ضمن تصميم بنظام الـ flexbox، يمكن للحاويات والعناصر تلقائيًا التكيف مع حجم الشاشة – سواء كانت على سطح المكتب أو الأجهزة اللوحية أو الهواتف المحمولة. هذا الأسلوب يعمل بشكل ممتاز لكل الأحجام: من حاويات بعرض محدّد (مثل 1120px أو 1140px) وحتى تلك بنسبة مئوية.
📦 النقطة الثانية :
لقد وجدت طريقة سهلة وسريعة لجعل الحاويات والبطاقات تتوسع وتتقلص تلقائيًا لتتناسب مع أحجام الشاشات المختلفة – سواء على الحواسيب أو الأجهزة المحمولة – بفضل flexbox.
مميزات هذا الأسلوب :
- على الشاشات العريضة، تنتشر البطاقات بالتساوي.
- على الشاشات الضيقة، تُعرض كل بطاقة على سطر منفصل.
- نوع التصميم هذا يسحب ويضغط العناصر بطريقة ذكية مع الحفاظ على الحد الأقصى للعرض.
طريقة التركيب :
6 أعمدة في شاشة الكمبيوتر
- 13,5%
- 25%
- 35%
1
2
3
4
5
6
7
8
9
10
11
5 أعمدة في شاشة الكمبيوتر
- 16.5%
- 25%
- 35%
1
2
3
4
5
6
7
8
9
4 أعمدة في شاشة الكمبيوتر
- 20%
- 35%
- 100%
1
2
3
4
5
6
7
3 أعمدة في شاشة الكمبيوتر
- 25%
- 35%
- 100%
1
2
3
4
5
2 أعمدة في شاشة الكمبيوتر
- 35%
- 100%
- 100%
1
2
3
الحاويات القابلة للتوسع (Flex‑Grow Containers)
لقد وجدت طريقة سهلة وسريعة لجعل الحاويات والبطاقات تتوسع وتتقلص تلقائيًا لتتناسب مع أحجام الشاشات المختلفة – سواء على الحواسيب أو الأجهزة المحمولة – بفضل flexbox.
2 أعمدة في شاشة الكمبيوتر
15%
تمـــدد
3 أعمدة في شاشة الكمبيوتر
24%
تمـــدد
4 أعمدة في شاشة الكمبيوتر
32%
تمـــدد
5 أعمدة في شاشة الكمبيوتر
41%
تمـــدد
6 أعمدة في شاشة الكمبيوتر
49%
تمـــدد
7 أعمدة في شاشة الكمبيوتر
58%
تمـــدد
8 أعمدة في شاشة الكمبيوتر
66%
تمـــدد
9 أعمدة في شاشة الكمبيوتر
75%
تمـــدد
10 أعمدة في شاشة الكمبيوتر