読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

Autoprefixerでdisplay: boxしたい

CSS CSS3

けどできないってことでいいのかしら。

20150213: 追記
できないと思ってた時期が私にもありました。
ちゃんと設定すれば、できます。

過渡期プロパティのアイツ

すーぱー便利なアイツ。
display: boxってありますよね。
もうアレなしじゃ生きていけないですよね?

例えば上下左右で中央寄せしたい場合。

Box仕様 Flex仕様
display: box display: flex
box-flex: 1 flex: auto
box-pack: center justify-content: center
box-align: center align-items: center

過渡期ということで、書き方が複数あったりする。

え?中間にもなんか仕様あった気がする?
気のせいです。

ただAutoprefixerってそもそも

Q. Why doesn’t Autoprefixer support display: box, box-align, etc?

A. There was 3 specification versions for Flexbox. For example, 2009 draft suggested to write display: box, 2012 draft display: flexbox, but final versions display: flex.

Autoprefixer add prefixes only for properties from final version of Flexbox spec. So, for example, you need to write display: flex instead of display: box.

  • Autoprefixerさまとしては、最新仕様しか許さない
  • かといってflexで書くと-webkit-flexしか付けてくれなくて、Flex仕様に未対応のAndroidが\(^o^)/
  • でもboxって書いても-webkit-boxはつけてくれない
  • つまり、Autoprefixerはモバイルで実質使えないコ

って結論なんですが、なんとかなるんですかコレ?

どうしよう

どうしてもAutoprefixer使いたいなら、

display: -webkit-box;
display: box;
display: flex;

ってする・・?
AutoなPrefixer使っておきながら、なんで俺は自分でプレフィックスを書いてるんや・・って気持ちになること間違いなしなので、私は自分でmixin書く道を選びます。

まあモバイルなら暫くはBox仕様だけ使ってれば良いんですけど、なんだかなー。

あえてversionが古いAutoprefixerを使うって選択肢もあ・・ナシでお願いします。

ただこれは全て設定の問題で

追記ですがここからがこの記事の本題です。

リポジトリのREADMEにもあるように、

display: flex;

ってだけ書けば、

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
}

ってしてくれます、デフォルトでは。

ただし設定で、

-b "last 2 versions"

みたく設定すると、結果が変わります。
最初に某誰かさんがハマったみたく、-webkit-boxが出力されなくて時間を無駄にします!

と、@nakajmg神にお導き頂きました。
ありがたや~ありがたや~。