あなたのお役に立ちたいわんど。

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

*旧ブログ(あんど+BLOG)からの転載です。

※随時更新中

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

記事:CSS3 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」などを使用する事ができる。はず。

めもめも。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Web制作の株式会社あんどぷらす
ECサイト構築サービス「ウルトコ」
イベントスペース「fuigo」
CS-Cartの情報ポータル「STOCK」