メモを揉め

お勉強の覚書。

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

<button>要素にflexboxを適用したところ、ChromeSafariFireFoxでそれぞれ表示が違った。
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: flexflex-flow: row nowrapは効いてるっぽいが、justify-contentが効かない。
FireFoxだとそもそもdisplay: flexが効かない。

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
f:id:alluser:20160724074231p:plain

Safari
f:id:alluser:20160724074236p:plain

FireFox
f:id:alluser:20160724074224p:plain