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

مرحبا،

ما يقوم به Flexbox هو التحكم بهيكلة مجموعة من العناصر التي تقع تحت حاوي واحد، ويسمح لنا بـ:

صف هذه العناصر في سطر واحد بدون تحديد عرض كل واحد منها (واستخدام float) كما يقوم بإضافة العناصر إلى سطر جديد إن لم تكفي المساحة.

• صّف هذه العناصر على شكل عمود بسهولة كبيرة.

• محاذات العناصر إلى اليمين أو اليسار أو الوسط (بالنسبة للحاوي).

• تغيير الترتيب الذّي تظهر به العناصر بدون التعديل على HTML.

• تحديد المساحة التي يأخذها كل عنصر بدون القلق في حال تغيير حجم الحاوي.

أي أنه حيث يسمح انا بتحكم أفضل للعناصر التي ضمنه وطريقة الترتيب و المحاذاة والعرض.

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

وتضيف إمكانية تحديد الأبعاد بشكل نسبي بين أبناء عنصر أب لها.

يمكنك قراءة المقالين التاليين من أكاديمية حسوب:

تعرف على Flexbox :

أساسيات Flexbox في CSS مع أمثلة عملية:

توثيق أكاديمية حسوب للخاصية Flex بشكل عام:

توثيق أكاديمية حسوب للخاصية Flex-grew:

-grow

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

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

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

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

لفترة طويلة ، كانت الأدوات الوحيدة الموثوقة المتوافقة مع المستعرضات المتاحة لإنشاء تخطيطات CSS هي أشياء مثل floats وpositioning. انها جيدة ، وهي تعمل ، لكنها في بعض النواحي مقيدة ومحبطة إلى حد ما. من الصعب أو المستحيل تحقيق متطلبات التخطيط البسيطة التالية باستخدام هذه الأدوات بأي طريقة مريحة ومرنة: توسيط كتلة المحتوى عموديًا داخل الحاوية, جعل جميع الأطفال في الحاوية يأخذون قدرًا متساويًا من العرض / الارتفاع المتاح ، بغض النظر عن مقدار العرض / الارتفاع المتاح, جعل كل الأعمدة في تخطيط متعدد الأعمدة يتخذ نفس الارتفاع حتى لو كانت تحتوي على كمية مختلفة من المحتوى, يجعل flexbox الكثير من مهام التخطيط أسهل بكثير. flex-grow يحدد القدرة على نمو عنصر مرن إذا لزم الأمر. يقبل قيمة غير موحدة تعمل كنسبة. إنها تحدد مقدار المساحة المتاحة داخل الحاوية المرنة التي يجب أن يشغلها العنصر. على سبيل المثال ، إذا تم ضبط النمو المرن لجميع العناصر على 1 ، فسيتم ضبط كل طفل على حجم متساوٍ داخل الحاوية. إذا كنت ستعطي أحد الأطفال قيمة 2 ، فسيشغل هذا الطفل ضعف مساحة الآخرين. في المثال الآتي سوف توضح الفكرة أكثر

Html

Css

الناتج سوف يكون بهذا الشكل

عند اعطاء ال article الأول خاصية flex-grow: 2; سوف يكون الناتج كالآتي