توضیح بهتر برای flex-grow

سلام وقت بخیر.
اول یه تشکر کنم بابت دوره خوبتون که جامع ترین دوره تو وب فارسی برای فلکس باکس هست. خسته نباشید.

من جلسه flex-grow رو دیدم ولی دقیقا اون چیزی نبوده که انجام می شده و شروع کردم خودم تست کردم و با یه سری محاسبات به این نتیجه پایین رسیدم:

flex-grow اینجوری کار میکنه که مثلا ما تو یه صفحه با 1000 پیکسل عرض هستیم و چهار آیتم داریم که هر کدوم مثلا 200 پیکسل عرض دارن که رو هم میشن 800 پیکسل و 200 تا هم از سمت راست خالیه. حالا ما اگر به سه آیتم اول Flex-grow یک بدیم و به آیتم چهارم دو بدیم؛ flex-grow میاد میگه خب سه تا آیتم 1 هستن و یه آیتم 2 هست که میشه: 
  5 = 2 + (1 * 3)
بعد میاد اون 200 پیکسل (فضای خالی) رو تقسیم بر 5 میکنه( 40 = 5 / 200 ) و به سه آیتم اول هر کدوم 40 پیکسل میده و به آیتم چهارم( با flex-grow: 2)  2 * 40 پیکسل میده. برای بقیه مثال هم همینطوره. حتی من تست کردم وقتی width به آیتم ها ندیم بازهم دو یا چند برابر نمیکنه بلکه فضای خالی محاسبه میکنه و طبق مثال بالا کار میکنه. من برای تست این موضوع با افزونه page rule redux کروم هم استفاده کردم و نتیجه کار 99% مشابه مثال بالا بود.

امیدوارم که مفید بوده باشه