بديل Flexbox لـ IE9

توفر المتصفحات الحديثة نموذج flexbox CSS، مما يوفر طريقة فعالة لتوزيع العناصر ومواءمتها. ومع ذلك، IE9 يفتقر إلى دعم Flexbox.

خذ بعين الاعتبار التنفيذ التالي لـ IE10:

div#navContainer {
    display: flex; // Modern browsers
    display: -ms-flexbox; // IE10
}

لمعالجة غياب Flexbox في IE9، فكر في دمج Modernizr، وهي مكتبة JavaScript تكتشف إمكانيات Flexbox. باستخدام Modernizr، يمكنك إضافة أنماط احتياطية حسب الضرورة. على سبيل المثال:

.container {
    display: flex;
}

.no-flexbox .container {
    display: table-cell;
}

ارجع إلى عروض Zoe Gillenwater للحصول على مزيد من الإرشادات:

التسوية باستخدام Flexbox:

• تباعد التنقل الأفقي: العرض: مضمن- block;
  • تثبيت العناصر بدون Flexbox: العرض: خلية الجدول؛
  • محاذاة النماذج الاحتياطية
  • مثال مع وبدون ترتيب مرن
تخطيط CSS3:

• استخدام الكتلة المضمنة مع Flexbox: النموذج الأفقي
  • استخدام الكتلة المضمنة مع Flexbox: التنقل الأفقي
  تذكر:

دعم المتصفح لـ IE10 موثوق.

يتعامل Autoprefixer مع بادئات المتصفح.
• يوفر Modernizr إجراءات احتياطية.
• اعتماد Flexbox ليس حصريًا.