Альтернатива Flexbox для IE9

Современные браузеры предлагают модель CSS flexbox, обеспечивающую эффективный способ распределения и выравнивания элементов. Однако в 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;
}

Для получения дополнительных рекомендаций обратитесь к презентациям Зои Гилленуотер:

• Повышение уровня с помощью Flexbox:

  • Интервал горизонтальной навигации: display: inline- блок;
  • Закрепление элементов без Flexbox: display: table-cell;
  • Выравнивание резервных копий форм
  • Пример с гибким порядком и без него

• Макет CSS3:

  • Использование встроенного блока с Flexbox: горизонтальная форма
  • Использование встроенного блока с Flexbox: горизонтальная навигация

Помните:

• Поддержка IE10 браузером надежна.
• Autoprefixer обрабатывает префиксы браузера.
• Modernizr предоставляет резервные варианты.
• Внедрение Flexbox не является исключительным.