Alternativa Flexbox para IE9

Os navegadores modernos oferecem o modelo CSS flexbox, fornecendo uma maneira eficiente de distribuir e alinhar elementos. No entanto, o IE9 não tem suporte para Flexbox.

Considere a seguinte implementação para o IE10:

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

Para resolver a ausência do Flexbox no IE9, considere incorporar o Modernizr, uma biblioteca JavaScript que detecta os recursos do Flexbox. Com o Modernizr, você pode adicionar estilos alternativos conforme necessário. Por exemplo:

.container {
    display: flex;
}

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

Consulte as apresentações de Zoe Gillenwater para obter mais orientações:

• Aumentando o nível com o Flexbox:

  • Espaçamento de navegação horizontal: display: inline- block;
  • Fixando elementos sem Flexbox: display: table-cell;
  • Alinhando formulários substitutos
  • Exemplo com e sem pedido flexível

• Layout CSS3:

  • Usando bloco inline com Flexbox: formato horizontal
  • Usando bloco embutido com Flexbox: horizontal navegação

Lembre-se:

• O suporte do navegador para IE10 é confiável.
• O autoprefixer lida com os prefixos do navegador.
• Modernizr oferece substitutos.
• A adoção do Flexbox não é exclusiva.