لما يستخدم بعض الناس flex-grow مع flex-basis في CSS؟

لنقم بإقتباس التعريفين التالين من ويكي حسوب كالتالي : 

اقتباس

الخاصية flex-basis : تحدد القياس الرئيسي لأحد عناصر flex، وهذه الخاصية تضبط قياس صندوق المحتوى الخاص به .

اقتباس

الخاصية flex-grow : تحدد معامل التمدد لأحد عناصر flex ، فهي تحدد مقدار المساحة التي يجب أن يأخذها العنصر داخل حاوية flex .

و لنفترض أن حجم حاوية ما لدينا هو 1000 بكسل . هاته الحاوية تحوي 4 عناصر . قمنا بتحديد flex-basis أو أساس مرن لكل عنصر بـ 200 بكسل . 

سيجعل هذا العناصر تظهر كالتالي : 

كل من العناصر الأربع سيمتلك عرضا 200 بكسل .بالإضافة إلى مساحة إضافية متبقية 200 بكسل بعد توزيع العناصر .

إذا قمنا الان بإعطاء العنصر الثاني flex-grow أو نمو مرن بمقدار 2 (أي تعويضا لعنصرين flex) ، فسيشغل هذا العنصر الثاني ضعف المساحة المتبقية عن العناصر الأخرى و سيأخذ 200 بكسل إضافية , و سيظهر و كأنه يتمدد على باقي العناصر . 

لاحظ نمذجة للعملية : 

و بالتالي ،فإنه من أجل استخدام flex-grow لعنصر ما ، يجب أولاً تعيين flex-basis لينطلق منه الـ flex-grow فيعتبره مرجعا و معيارا يحدد معدل التمدد من عليه , فإن حددنا أساسا بـ 100 بكسل و أعطينا قيمة نمو بـ 3 , فسيكون عنصر الـ flex هذا معوضا لـ 3 من قيمة الأساس أي 300 بكسل . 

و لتتذكر الأمر على هذا النحو : 

• flex-basis : ترجمة لـ أساس مرن .
• flex-grow : ترجمة لـ نمو مرن .   

و لتحديد هذا النمو المرن لن نحتاج إلا لمعرفة ما هو المقدار الذي سينمو به عنصر عن باقي العناصر الأخرى , و عليه فإن : flex-grow تتطلب flex-basis . 

يمكنك الإطلاع على توثيق كل من الخاصيتين في ويكي حسوب كالتالي :

• flex-basis . 
• flex-grow .