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
が効かない。
// 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
各ブラウザのスクリーンショットこんな感じです。