Bootstrap 4 Flexbox
Bootstrap наконец-то начал поддерживать flexbox.
Flexbox будет задействован для следующих компонентов:
- вся система сеток (миксины и предопределенные классы), которые перейдут с float на display: flex;
- формы ввода display: table; сменит display: flex;
- медиа компоненты перейдут display: table;
Браузерные префиксы проставлены с помощью плагина Autoprefixer для Grunt.
Почему Flexbox?
В двух словах, flexbox предлагает более простые и гибкие варианты создания сеток:
- простое вертикальное выравнивание контента внутри родительского элемента;
- простое управление контентом для различных разрешений с помощью медиа запросов;
- простое управление высотой колонок в системе сеток;
Всё это можно осуществить и без flexbox, но часто на это требуется потратить много усилий.
Пример сетки с Flexbox
See the Pen Bootstrap 4 Flex Box Grid Demo by Alexey (@CreativeSeo33) on CodePen.
Как начать работать с Flexbox
Если вы знакомы с препроцессорами (Sass, Less и др.), то начать работать с flexbox в Bootstrap 4 для вас не составит труда.
- 1. Откройте файл _variables.scss, найдите переменную $enable-flex
- 2. Поменяйте ее значение с false на true
- 3. Скомпилируйте CSS файл заново и готово!
Кроме того, вы можете скачать готовый CSS файл с предустановленным flexbox.
Поддержка браузеров
Включение flexbox означает уменьшение поддержки браузерами и устройствами:
- Internet Explorer 9 и ниже не поддерживают flexbox;
- Internet Explorer 10 имеет несколько известных причуд: требует использования префикса, и поддерживает только синтаксис из старой версии спецификации 2012 года;
Будьте осторожны при использовании bootstrap 4 flexbox в ваших проектах, ориентируйтесь на вашу аудиторию, пользуетесь сайтом CanIUse, чтобы уточнить поддержку браузерами.