اريد معرفة كيف تعمل خاصية flex-box

السلام عليكم ورحمة الله وبركاته

إضافة خواص الflex-box إلى صفحاتك سيعطيك تحكم هائل في المحتوى وسيجعل من تقسيمك للصفحة سريع وسهل على حسب فكرتك

خاصية الflex-grow تضيف للعناصر داخل الأب الذي تريده ديناميكية أفضل بكثير من استخدام خاصية width حيث أنك تقوم بتصميم العناصر على حسب المساحات التي تريدها لهم بدون تدخل منك

على سبيل المثال إذا كان لديك ثلاثة عناصر تريد عرض الأول يساوي عرض الأثنين الأخرين فإنك ستعطيه عرض 50% والاخرين كل واحد 25% ولكن بخاصية الflex-grow كل ما عليك فعله هو أنك تحدد أن هذا العنصر ياخذ 2 من عرض الأب وهكذا يقوم الflex بإعطائه عرض الاثنين الأخرين ويمكنك القياس على ذلك إذا كان لديك عشرة عناصر تريد التقسيم بينهم فإنه سيكون ممل للغاية إعطاء عرض خاص لكل عنصر ناهيك عن محاولة تحديد النسب لكل عنصر أما بخاصية الflex grow فانت وكأنك قد قسمت الأب لعشر مربعات وتحدد كم مربع ينبغي أن ياخذه الابن المميز وهكذا تكون انتهيت البقية سيأخذون المساحة المتبقية