Alternative Flexbox pour IE9

Les navigateurs modernes proposent le modèle CSS flexbox, offrant un moyen efficace de distribuer et d'aligner les éléments. Cependant, IE9 ne prend pas en charge Flexbox.

Considérez l'implémentation suivante pour IE10 :

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

Pour remédier à l'absence de Flexbox dans IE9, envisagez d'incorporer Modernizr, une bibliothèque JavaScript qui détecte les fonctionnalités de Flexbox. Avec Modernizr, vous pouvez ajouter des styles de secours si nécessaire. Par exemple :

.container {
    display: flex;
}

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

Référez-vous aux présentations de Zoe Gillenwater pour plus de conseils :

• Niveau supérieur avec Flexbox :

  • Espacement de navigation horizontale : affichage : en ligne- block;
  • Épingler des éléments sans Flexbox : display: table-cell;
  • Alignement des formulaires de secours
  • Exemple avec et sans ordre flexible

• Mise en page CSS3 :

  • Utilisation du bloc en ligne avec Flexbox : formulaire horizontal
  • Utilisation du bloc en ligne avec Flexbox : navigation horizontale

Rappelez-vous :

• La prise en charge du navigateur pour IE10 est fiable.
• Le préfixe automatique gère les préfixes du navigateur.
• Modernizr propose des solutions de secours.
• L'adoption de Flexbox n'est pas exclusive.