Alternativa Flexbox para IE9

Los navegadores modernos ofrecen el modelo CSS flexbox, que proporciona una forma eficiente de distribuir y alinear elementos. Sin embargo, IE9 carece de compatibilidad con Flexbox.

Considere la siguiente implementación para IE10:

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

Para abordar la ausencia de Flexbox en IE9, considere incorporar Modernizr, una biblioteca de JavaScript que detecta las capacidades de Flexbox. Con Modernizr, puede agregar estilos alternativos según sea necesario. Por ejemplo:

.container {
    display: flex;
}

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

Consulte las presentaciones de Zoe Gillenwater para obtener más orientación:

• Subir de nivel con Flexbox:

  • Espaciado de navegación horizontal: visualización: en línea- block;
  • Fijar elementos sin Flexbox: display: table-cell;
  • Alinear formularios alternativos
  • Ejemplo con y sin orden flexible

• Diseño CSS3:

  • Usando bloque en línea con Flexbox: forma horizontal
  • Usando bloque en línea con Flexbox: navegación horizontal

Recuerde:

• La compatibilidad del navegador con IE10 es confiable.
• Autoprefixer maneja los prefijos del navegador.
• Modernizr proporciona alternativas.
• La adopción de Flexbox no es exclusiva.