先日、スマホサイトを作る機会があったのでCSS3のFlexboxを使ってみました。Floatを駆逐するほどのポテンシャル(？)も秘めていると聞いていたのですが、全面的には採用せず、ページャーなどの小さなパーツにて採用しました。

使ってみた感想は、

確かに便利！

要素サイズが不定(可変)のものも中央に寄せることができるので、positionやmarginを駆使する必要がありません。均等に並べたり、自動的に間隔を調整してくれたりするので、このプロパティ一つで済むので楽ちんです。
ただ、「Floatを駆逐」することは、すぐにはないのかな、と思います。単純な流し込みのレイアウトならばFloatで十分ですし、後方互換についてもやや難があります（後述）。

ただ、ポテンシャルはあると思います。今までFloatでやっていたことはFlexboxで代替できますので、いつかはFloatは死語になるかもしれません。今後はFlexboxを徐々に採用していきたいと思います。でも、しばらくはFloatメインが続くと思います。正直、きちんとマスターしていないので大々的に使うのは少し怖いというのが本音です。

後方互換についてはやや難あり

先にも書きましたが後方互換については少し面倒です。border-radiusやbox-shadowなどのCSS3をサポートしているIE9でも非対応、正式対応はIE11とサポートが比較的遅いです。Androidも4.4以降、iOSは7からです。それに加え、CSS3策定の途中で仕様が変更になったりで、バージョンによっては古い仕様で対応していたりするので、ややこしいです。

他のCSS3が-webkit-などのベンダープレフィックスを付ければ大丈夫なのが多いものの、こちらはプロパティの名前自体が「box」「flexbox」など変わっているので、一筋縄ではいきません。実のところ、自分でもきちんと理解していないのですが、以下のように書いたらとりあえず平気でした。

display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
display:-webkit-box;/*--- Androidブラウザ用 ---*/
display:-ms-flexbox;/*--- IE10 ---*/
display: -webkit-flex;/*--- safari（PC）用 ---*/
justify-content: center;
-ms-flex-pack:center;
-webkit-box-pack:center;
justify-content:center;
-webkit-justify-content:center;

Flexboxの適用と中央寄せのプロパティだけでこんなに長くなります。

近いうちには後方互換しなくてもよくなるはず！

Flexboxの難点は後方互換なので、じきに古いブラウザは消えていって対応しなくてもよくなるはずです（願望）。ただ、今現在ですと、IE11未満やAndroid4.xシリーズを切り捨てるのは少し勇気がいるのかなと思います。

今後はFlexboxによるレイアウトが必須になること間違いないので、積極的に使っていきたいです。