سلام سینا جان

flex-grow: میاد چیکار میکنه؟ حساب کن شما یک عرض ۵۰۰px داری اگر ما ۵ تا عنصر توی یک ردیف داشته باشیم و بیایم به هر کدوم از این عناصر

flex-grow: 1;

بدیم هر کدوم از این عناصر عرض ۱۰۰px میگیرن

حالا اگر همه ۱ :flex-grow بگیرن ولی یکیشون flex-grow: ۲ بگیره اندازش دو برابر بقیه میشه.

flex-basis: حالا فک کن flex-grow هنوز ندادی به عناصرت و میای با استفاده از flex-basis به هرکدوم از عناصرت یک عرض ۵۰px میدی 

یعنی ۲۵۰px از عرض ۵۰۰px اشغال شده و ۲۵۰px خالیه دیگ داری 

حالا میای flex-grow میزنی این grow که میزنی ، روی اون فضای خالیه موجود اعمال میشه(یعنی ۲۵۰px)

اگر فقط به یکی از عناصرت flex-grow: ۱ بدی کل اون ۲۵۰px به اون عنصر اختصاص داده میشه

اگر به دوتا شون بدی ۲۵۰px تقسیم بر ۲ میشه و به هرکدوم ۱۲۵px اضافه میشه

اگه به سه تاشون بدی تقسیم بر ۳ میشه و به همین صورت میره جلو.

حالا اگه به یکی از عناصر flex-grow:۱ بدی و به یکی دیگ flex-grow:۴ 

از اون ۲۵۰px یک سهم برای اولی میشه (یعنی ۵۰px) ۴ سهم هم برای دومی (یعنی ۲۰۰px)

امیدوارم که درست توضیح داده باشم

موفق باشی.