ما هو flex-grow و flex-shrink في CSS؟ وكيف يتحكمان في أحجام العناصر بذكاء
إذا كنت تعمل على تصميم واجهات الويب الحديثة، فغالبًا أنك تعتمد على Flexbox لتنظيم العناصر داخل الصفحة. لكن الوصول إلى تخطيط مرن واحترافي لا يتوقف فقط على استخدام Flexbox، بل يعتمد بشكل أساسي على فهم خصائصه بعمق—وخاصة flex-grow و flex-shrink.
هذان المفهومان يبدوان بسيطين ظاهريًا، لكنهما في الحقيقة يتحكمان بشكل ذكي في كيفية توزيع المساحة بين العناصر. إذا فهمتهما جيدًا، ستتمكن من بناء Layouts مرنة، متجاوبة، وسهلة التحكم بدون تعقيد.
في هذا المقال، سنشرح بطريقة عملية ومبسطة كيف يعمل كل منهما، وما الفرق بينهما، وكيف تستخدمهما في سيناريوهات حقيقية.
ما هو flex-grow؟
تعريف مبسط
خاصية flex-grow تحدد قدرة العنصر على التمدد داخل الحاوية عندما يكون هناك مساحة إضافية.
بمعنى آخر:
إذا كان هناك فراغ داخل الحاوية، فإن flex-grow يحدد أي العناصر "تأخذ" هذا الفراغ وكم تأخذ منه.
كيف يعمل flex-grow؟
كل عنصر داخل Flex container يمكن أن يكون له قيمة flex-grow:
- القيمة الافتراضية: 0 (أي لا يتمدد)
- أي قيمة أكبر من 0: تسمح للعنصر بالتمدد
الفكرة الأساسية
flex-grow لا يعمل بشكل مطلق، بل يعتمد على النسبة بين العناصر.
مثال واقعي
تخيل أنك لديك 3 عناصر داخل حاوية:
- العنصر الأول: لديه قدرة تمدد عادية
- العنصر الثاني: لديه ضعف القدرة
- العنصر الثالث: لا يتمدد
النتيجة:
- المساحة الفارغة سيتم توزيعها فقط على العنصرين الأول والثاني
- العنصر الثاني سيأخذ ضعف المساحة مقارنة بالأول
متى تستخدم flex-grow؟
استخدمه عندما تريد:
- ملء المساحة الفارغة داخل الحاوية
- جعل بعض العناصر أكثر أهمية بصريًا
- بناء Layout ديناميكي يتكيف مع حجم الشاشة
أمثلة تطبيقية
- شريط تنقل: عنصر البحث يتمدد ليأخذ المساحة المتبقية
- Dashboard: بعض الكروت تكون أكبر من غيرها
- Layout الصفحة: المحتوى الرئيسي يتمدد أكثر من الشريط الجانبي
ما هو flex-shrink؟
تعريف مبسط
خاصية flex-shrink تحدد قدرة العنصر على الانكماش عندما لا توجد مساحة كافية داخل الحاوية.
بمعنى آخر:
إذا كانت العناصر أكبر من الحاوية، فإن flex-shrink يحدد من "سيتقلص" وكيف.
كيف يعمل flex-shrink؟
- القيمة الافتراضية: 1 (أي يمكن أن ينكمش)
- القيمة 0: يمنع العنصر من الانكماش
الفكرة الأساسية
مثل flex-grow، تعتمد flex-shrink أيضًا على النسب.
مثال واقعي
تخيل أن لديك 3 عناصر أكبر من مساحة الحاوية:
- عنصر مهم (مثل زر رئيسي)
- عنصر متوسط الأهمية
- عنصر ثانوي
يمكنك:
- منع العنصر المهم من الانكماش
- السماح للعناصر الأخرى بالتصغير
النتيجة:
- يتم الحفاظ على العناصر المهمة بحجمها
- يتم تقليص الأقل أهمية
متى تستخدم flex-shrink؟
استخدمه عندما تريد:
- التحكم في تصغير العناصر
- الحفاظ على عناصر معينة بحجم ثابت
- منع كسر التصميم عند الشاشات الصغيرة
أمثلة تطبيقية
- زر "شراء الآن" لا يصغر في الشاشات الصغيرة
- صورة المنتج تظل واضحة بينما النص يتقلص
- شعار الموقع لا يتأثر عند ضيق المساحة
الفرق بين flex-grow و flex-shrink
لفهم الفرق بشكل واضح:
- flex-grow = ماذا يحدث عند وجود مساحة إضافية
- flex-shrink = ماذا يحدث عند نقص المساحة
جدول مقارنة شامل
| الميزة (Feature) | flex-grow | flex-shrink |
|---|---|---|
| الوظيفة الأساسية | التحكم في التمدد | التحكم في الانكماش |
| يعمل عند | وجود مساحة إضافية | نقص المساحة داخل الحاوية |
| القيمة الافتراضية | 0 | 1 |
| التأثير | تكبير العنصر | تصغير العنصر |
| يعتمد على | نسبة القيم بين العناصر | نسبة القيم بين العناصر |
| الاستخدام الشائع | ملء الفراغ | الحفاظ على التصميم عند الضغط |
كيف يعملان معًا؟
الفكرة الذكية
في الواقع، flex-grow و flex-shrink يعملان معًا لتحقيق توازن:
- إذا كانت المساحة أكبر من المطلوب → flex-grow يتحكم
- إذا كانت المساحة أصغر من المطلوب → flex-shrink يتحكم
سيناريو عملي
تخيل Layout يحتوي على:
- Sidebar
- Content
- Ads
في شاشة كبيرة:
- Content يتمدد (flex-grow)
- Sidebar و Ads ثابتين نسبيًا
في شاشة صغيرة:
- Content يبدأ بالانكماش
- Ads قد تختفي أو تصغر
- Sidebar يحافظ على حد أدنى
أخطاء شائعة يجب تجنبها
❌ الاعتماد على القيم الافتراضية بدون فهم
الكثير من المشاكل تحدث لأن المطور لا يعرف أن:
- flex-shrink = 1 افتراضيًا (العناصر ستنكمش!)
❌ إعطاء جميع العناصر نفس القيم
هذا يؤدي إلى:
- تصميم غير متوازن
- فقدان الأولويات البصرية
❌ تجاهل تجربة المستخدم
- لا تجعل عناصر مهمة تنكمش
- لا تجعل عناصر غير مهمة تملأ الشاشة
نصائح احترافية
- استخدم flex-grow لتحديد "من يستحق المساحة"
- استخدم flex-shrink لتحديد "من يمكن التضحية به"
- فكّر في الأولوية البصرية لكل عنصر
- اختبر التصميم على شاشات مختلفة
- لا تعتمد على التخمين—جرّب وراقب النتائج
كيف تفكر كمحترف؟
بدل التفكير في القيم، فكّر بهذه الطريقة:
عند وجود مساحة:
من يجب أن يتمدد؟
عند ضيق المساحة:
من يمكن أن يتقلص؟
هذا التفكير سيساعدك على بناء Layout احترافي بسهولة.
خلاصة
خصائص flex-grow و flex-shrink ليست مجرد أدوات، بل هي أساس التحكم الذكي في توزيع المساحة داخل Flexbox.
- flex-grow يمنحك القدرة على توزيع المساحة الفارغة
- flex-shrink يمنحك القدرة على إدارة الضغط عند ضيق المساحة
عند استخدامهما بشكل صحيح، يمكنك بناء واجهات مرنة، متجاوبة، ومريحة بصريًا دون تعقيد.
الأسئلة الشائعة (FAQ)
1. ما الفرق بين flex-grow و flex-shrink؟
flex-grow يتحكم في تمدد العناصر عند وجود مساحة إضافية، بينما flex-shrink يتحكم في انكماشها عند ضيق المساحة.
2. هل يمكن استخدامهما معًا؟
نعم، وغالبًا يتم استخدامهما معًا لتحقيق توازن في توزيع المساحة داخل Flexbox.
3. ما القيمة الافتراضية لكل منهما؟
flex-grow قيمته الافتراضية 0، بينما flex-shrink قيمته 1.
4. كيف أحدد أي عنصر يتمدد أكثر؟
عن طريق إعطائه قيمة flex-grow أكبر مقارنة بباقي العناصر.
5. كيف أمنع عنصر من الانكماش؟
عن طريق ضبط flex-shrink بحيث لا يسمح له بالتصغير، مما يحافظ على حجمه حتى في المساحات الضيقة.
🚀 البداية في إيدك
كل اللي محتاجه منك:
التزام
مذاكرة
وصبر
ومع النظام الصح…
هتوصل لنفس النتيجة اللي وصلها مبرمجين كتير بدأوا من الصفر
ودلوقتي شغالين في المجال 💪
🚀 ابدأ رحلتك مع كرياتيفو
وخد أول خطوة حقيقية نحو مستقبلك في البرمجة
📱 ابعتلنا علي واتساب
💬 ابعتلنا علي فيسبوك
