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