CSS3 Multiline FlexBox

[melky]

Оки доки, новое время, стабильная спека, все дела, тру-ля-ля.

Флексы - ну очень приятная штука. После оговорки момента поддержки браузеров ( самые свежие версии за исключением Opera Mini ) появляется "зелёный сигнал" вёрстки и вообще новых технологий.

Но очень уж смущает один неприятный момент.

http://caniuse.com/flexbox:

For Firefox 28- it refers to lack of flex-wrap & flex-flow support.

Т.е. никаких вам переносов элементов на новые строки при переполнении у FireFox.

Проверил на Aurora следующий код :

<style>
.wrapper {
  width: 300px;
  outline: 1px red dashed;
  padding: 5px;
  display: flex;
  flex-flow: row wrap;
}
.wrapper .item {
  width: 130px;
  margin: 5px;
  outline: 1px green dashed;
}
</style>
<div class="wrapper">
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
</div>

Выводится всё чётко, в 2 строки:



В стабильной ветке немножко не так:



На StackOverflow предлагают обходить это дело через @supports

Что получается :

<style>
.wrapper {
  width: 300px;
  outline: 1px red dashed;
  padding: 5px;
}
.wrapper .item {
  width: 130px;
  margin: 5px;
  outline: 1px green dashed;
}

/* flex-wrap is supported */
@supports (flex-wrap: wrap) {
  .wrapper {
    display: flex;
    flex-flow: row wrap;
  }
  .wrapper .item {
    display: initial;
  }
}


/* no flex-wrap */
@supports not (flex-wrap: wrap) {
  .wrapper .item {
    display: inline-block;
  }
}

</style>
<div class="wrapper">
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
</div>

Ну и выглядит, вроде, сносно. Но всё равно это не full flex experience

Насчёт даты выхода FireFox 28:

Moves to RELEASE channel during week of March 18, 2014

Т.е. ещё ~1,5 месяца терпеть.

Вот, думаю, что делать - верстать во flexbox или не стоит пока. Как бы вы поступили?