كيفية تمديد الطفل المرن لملء ارتفاع الحاوية

عند العمل مع Flexbox، من الشائع مواجهة مشكلة وجود عنصر فرعي لا يمتد إلى الارتفاع الكامل لحاويته. غالبًا ما يكون هذا بسبب الاستخدام غير الصحيح لخاصية الارتفاع: 100%.

في Flexbox، يمكن أن تكون خاصية الارتفاع: 100% مشكلة بسبب:

• يحتاج العنصر الأصلي إلى قيمة ثابتة الارتفاع، والذي يتعارض مع مبادئ Flexbox.
• عند وجود عدة أطفال، فإن استخدام الارتفاع: 100% على طفل واحد سوف يتجاهل الآخرين.

الحل هو إزالة height: خاصية 100% وتعتمد على سلوك Flexbox الافتراضي. بشكل افتراضي، تتم محاذاة العناصر المرنة في اتجاه الصف (التخطيط النموذجي) عموديًا مع خاصية محاذاة العناصر: التمدد. وهذا يعني أن العنصر الفرعي سوف يمتد تلقائيًا لملء الارتفاع المتاح للحاوية.

إليك مثال يوضح الاستخدام الصحيح بدون ارتفاع: 100%:

  

  

    some

    cool

    text
  

في هذا المثال، سوف يمتد الطفل الأصفر ليملأ ارتفاع الحاوية، بغض النظر عن ارتفاع نص الطفل الأزرق. وذلك لأن قيمة محاذاة العناصر الافتراضية: تضمن تمديد العناصر المرنة عموديًا لتشغل المساحة المتوفرة.