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

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

Html

Css

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

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