Autoprefixerでdisplay: boxしたい

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

すーぱー便利なアイツ。
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神にお導き頂きました。
ありがたや～ありがたや～。