Готовы ли мы использовать Flexbox?

Все это выглядит хорошо и достаточно просто, но не слишком волнуйтесь. У нас есть несколько вещей, которые мы должны рассмотреть, прежде чем использовать эту функцию CSS.

Поддержка браузера и Polyfills

Приятно знать, что поддержка браузеров высока и растет, и мы можем увидеть разбивку, посмотрев на flexbox «Можно ли использовать…» . Он поддерживается в IE10 и выше и во всех других браузерах, кроме Opera Mini. Это очень здорово видеть. Если вы ищете IE9 и ниже, вам нужно пойти по маршруту polyfill / fallback.

К сожалению, единственным доступным полифилом является Flexie , который включает модель flexbox 2009 года в неподдерживаемых браузерах. Полифилов для нового синтаксиса не существует (хотя Ричард Эррера, который создал оригинальный полифилл flexbox , работает над одним для обновленного синтаксиса ). В любом случае, вы обнаружите, что хотите сначала не использовать полифилы, поскольку они, как правило, медленные.

Как правило, отступления должны быть простыми в реализации. Modernizr , инструмент обнаружения функций, позволяет нам определить, поддерживает ли браузер flexbox (устаревший и текущий), поэтому таргетинг должен быть простым и должен выглядеть примерно так:

 .container {
  display: block;
}

.flexbox .container {
  display: flex;
}

Если Modernizr не ваша вещь, и вы не идете по дороге Opera, то условный CSS может быть всем, что вам нужно, чтобы помочь вам разобраться с IE9 и ниже.

Поставщик префиксов

Синтаксис flexbox, как показано выше, выглядит лаконичным и симпатичным, но это потому, что я даже не начал говорить о префиксах поставщиков. Flexbox — это настоящий кошмар с префиксами поставщиков, в основном из-за того, что спецификация менялась 3 раза за 3 года. Старые браузеры WebKit по-прежнему используют свойства с префиксом webkit

Если вам нужно поддерживать все эти более старые реализации, вам понадобится множество *-box*-flexbox*-flex Скомпилированный CSS для нашего .container

 .container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

Это не красиво! Но есть решения в нашем распоряжении.

Autoprefixer

Autoprefixer — это отличный и современный инструмент, который автоматически префиксирует ваш CSS для вас. Вы можете настроить его как задачу Grunt, и он будет следить за изменениями в вашей таблице стилей. Это прекрасный инструмент, который избавит вас от множества головных болей.

Сас и компас

Sass также может прийти сюда на помощь, если мы настроим некоторые миксины, чтобы мы начали работать. Вот набор миксов Sass и базовая реализация, взятые из руководства CSS-Tricks для flexbox :

 @mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.container {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}

Compass — это фреймворк для CSS, который предлагает массу миксов для авторизации наших файлов Sass. У них есть миксин для flexbox, но, к сожалению, он для старого синтаксиса . Тем не менее, Autoprefixer (упомянутый выше) прекрасно интегрируется с Compass и обрабатывает все префиксы для вас без необходимости изменять рабочий процесс. Ухоженная.

Наконец, если вы используете PHP в качестве препроцессора CSS, вам может понадобиться взглянуть на функции Flexbox, которые предоставляют несколько простых в использовании методов для работы с различными частями flexbox.

Итак … Готовы ли мы использовать Flexbox?

Мы посмотрели на то, что такое flexbox, откуда он взялся, как его использовать, поддержка, откат, префикс и все работы. Но все же, мы должны спросить себя, готовы ли мы начать внедрять это в наших проектах. Для меня ответ — оглушительное Да . Но у этого громкого да есть некоторый основной акцент:

1. Знайте свой проект, желаемый результат и ваш целевой рынок. Если вы публикуете мобильные приложения HTML5, тогда сделайте это. Если вы разрабатываете систему бухгалтерского учета для бизнеса с использованием Windows 98, вам, вероятно, нужно держаться подальше!
2. Поймите, что заполнение старой версии может помочь вам, но замедлит работу и без того медленных браузеров . В общем, я рекомендую держаться подальше от полифилсов — нет смысла тормозить и без того старую систему.

Так что продолжайте учиться, практиковаться и внедрять flexbox в ваш следующий подходящий проект. Это фантастическая и мощная функция, и ей очень весело пользоваться.