Frontend-разработчикам, работающим с Flexbox , больше не нужно жертвовать поддержкой старых версий IE. Ребята из 10up разработали Flexibility с открытым исходным кодом , полифилл, который использует JavaScript, чтобы позволить Flexbox работать с IE версий 8 и 9.
«К сожалению, поддержка Flexbox не была добавлена в Internet Explorer до версии 10, в результате чего более старые версии — все еще популярные в некоторых уголках — остались вне революции Flexbox», — сказал Тейлор Ловетт, директор веб-инженерии 10up. «Эта идея не понравилась сотруднику 10up’er Джонатану Нилу, которому было поручено разработать красивый макет для Fortune 50, вынужденный бороться с поддержкой более старых версий. Мы решили субсидировать его время, чтобы посмотреть, сможем ли мы внедрить поддержку Flexbox при далеко не идеальных требованиях браузера».
У CSS Tricks есть исчерпывающее руководство по Flexbox , макету, который он рекомендует как более подходящий для компонентов приложения или небольших сайтов (в качестве альтернативы сетке для крупномасштабных макетов).
Идея Flexbox, согласно документации w3.org , заключается в предоставлении гибкого контейнера, который расширяется или сжимается в зависимости от доступного пространства макета:
В модели гибкой компоновки дочерние элементы гибкого контейнера могут располагаться в любом направлении и могут «изгибать» свои размеры, либо увеличиваясь, чтобы заполнить неиспользуемое пространство, либо уменьшаясь, чтобы избежать переполнения родительского элемента. Как горизонтальное, так и вертикальное выравнивание дочерних элементов можно легко манипулировать. Вложение этих блоков (горизонтальное внутри вертикального или вертикальное внутри горизонтального) может использоваться для построения макетов в двух измерениях.
Flexbox идеально подходит для создания макетов, которые работают с различными размерами экрана и устройствами, особенно в случаях, когда размер контейнера макета неизвестен или динамичен. Гибкость расширяет это до IE 8 и 9, подключаясь к браузерным currentStyle и runtimeStyle проприетарным функциям для управления и перезаписи объявлений стилей.
Как только вы добавите гибкость.js в свой проект, он автоматически обнаружит элементы Flexbox и напишет новые стили, чтобы заставить их работать с IE 8 и 9. Гибкость распространяется под лицензией GPL v2 (или более поздней версии). Ознакомьтесь с репозиторием на GitHub , чтобы получить более подробную информацию о том, как его использовать и как он работает.
