CSS3 Flexboxについて2 対応ブラウザ編【めもめも】

2015-02-27

＊旧ブログ（あんど+BLOG）からの転載です。

※随時更新中

すんです。
前回紹介した「Flexbox」。

早速今作っているサイトに使ってみました！…が。

Safariでレイアウトが崩れる。

調べてみた所、

display: flex;

に対応していないブラウザ、バージョンがまだまだあるそうで。

現状は下記のような感じで対応してあります。

display: -webkit-flex;

といった形で。

場合によっては

display: -webkit-box;

という形になるみたい。

この「-webkit-flex」と「-webkit-box」、じゃあどっち書いとけば良いのよ！
っていう話なんですが、

Safariの場合ですと
ver6までは「-webkit-box」で。
ver6.1以降は「-webkit-flex」での対応が必要なようです。

現状、最新のバージョンは7.0.6？かな？（あやふや）

ただ古いバージョンのブラウザですと
「display: -webkit-box;」で設定したとしても、「flex-wrap」などなど、
使えなくなる機能、というか「display: box」に対応していないものが多くあるみたいで…

＿|￣|○

さらにさらに、
Safariに限らずその他のブラウザの旧バージョンでも、動かない場合があります。

「IE」「firefox」「Chrome」だと、最新バージョンでしたら

display: flex;

が問題なく動きますが、旧バージョンだと動かない場合が。

「-ms-」「-moz-」「-webkit-」といった感じで、
動かす為には各ブラウザ向けのベンダープレフィックスを付ける必要も出てきますし。

それでも動かないこともありますし。

…むむむ。

Safari以外のブラウザで、バージョンが最新でない場合でも、

display: flex;

display: -webkit-flex;

で対応が可能であれば、その他大体のFlexboxの機能、
「flex-wrap」「flex-flow」などを使用する事ができる。はず。

めもめも。