button要素にはflexboxを使わないほうが良さそうです

<button>要素にflexboxを適用したところ、Chrome、Safari、FireFoxでそれぞれ表示が違った。
IEではまだ試していない。

調べてみるとどうやらこういう事らしい。

stackoverflow: Flexbox not working on <button> element in some browsers

The problem is that the <button> element cannot be a flex container (in some browsers).

Certain HTML elements, by design, do not accept display changes. Three of these elements are:

• <button>
• <fieldset>
• <legend>

The idea is to maintain a level of common sense when styling HTML elements. For instance, the rule prevents authors from turning a fieldset into a table.

button要素はflex containerにはなれないと。
上記三つの要素はCertain HTML elements（用途が明らかな要素？）なので、displayの値は変えられないよ、というような事が書いてあるような気がします。

デモ

Chromeだと他の通常のブロック要素と同じようにflexboxが適用される。
Safariだとdisplay: flex、flex-flow: row nowrapは効いてるっぽいが、justify-contentが効かない。
FireFoxだとそもそもdisplay: flexが効かない。

looks_one looks_two

looks_one looks_two

// jade
button
  i.material-icons looks_one
  i.material-icons looks_two
.button
  i.material-icons looks_one
  i.material-icons looks_two

// stylus
@import 'nib'

button,
.button
  size 200px 50px
  padding 10px
  margin 20px
  text-align center
  box-sizing border-box
  display flex // FireFoxで効かない
  flex-flow row nowrap
  justify-content space-around // Safariで効かない
  outline none
  border none
  background-color #3399aa
  .material-icons
    size 30px auto
    line-height 30px
    background-color #bbb

各ブラウザのスクリーンショットこんな感じです。

Chrome

Safari

FireFox