نموذج الصندوق المرن: العرض: flex، box، flexbox

أحدث تقديم نموذج الصندوق المرن في CSS3 ثورة في طريقة تصميمنا تخطيطات. ومع ذلك، فإن وجود قيم متعددة لخاصية العرض (flex، box، flexbox) يمكن أن يؤدي إلى حدوث ارتباك.

فهم الاختلافات

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

• display: box: تم تقديم الدعم في Firefox 2.0 وChrome 4.0، وهو محدود ولم يتم تنفيذ التغليف بالكامل.
• display: flexbox: متوفر في Chrome 17 وInternet Explorer 10 (بادئة)، وقد تم إلغاؤه تدريجياً لصالح flex.
• display: flex: المعيار الحالي، المدعوم من المتصفحات الحديثة بما في ذلك Chrome وFirefox وSafari وInternet Explorer 11.

ما هي القيمة التي يجب استخدامها؟

يعتمد اختيار القيمة على متطلبات توافق المتصفح. إذا كان دعم المتصفحات الأقدم مثل Firefox 2.0 ضروريًا، فقد تحتاج إلى استخدام العرض: box. ومع ذلك، للحصول على أفضل توافق ومرونة، فإن display: flex هو الخيار الموصى به.

ملاحظة:
يُنصح عمومًا بتضمين كل من flex وbox الخصائص في التعليمات البرمجية الخاصة بك، خاصة عند استهداف المتصفحات القديمة التي تدعم مواصفات flexbox (على سبيل المثال، IE10). وهذا يضمن الاتساق عبر المتصفحات.

من خلال فهم الاختلافات ودعم المتصفح لهذه القيم، يمكنك الاستفادة بشكل فعال من نموذج الصندوق المرن لإنشاء تخطيطات سريعة الاستجابة وقابلة للتكيف.