CSS3の display:flex はスマホ未対応だった

CSS2で苦労していた段組みレイアウトも、CSS3になってからは簡単に設定できるようになりました。

とはいえ、HTML5が2014年10月に正式勧告されたのと違いCSS3はモジュールごとに勧告されているため、プロパティによってはボツになったり一部ブラウザで未対応だったりします。

CSS2での段組み、いまでいう「フレキシブルレイアウト」で指定する display:flex もそんな未勧告のモジュールに含まれるプロパティのひとつです。

仕事でスマホページを作ることになり、数年ぶりにフレキシブルレイアウトページを作成しました。

なんで数年ぶりかというと、仕事がサービス業EC部門なのでサイト作成がメインの業務ではないのと、家ではWordPressしかいじってないので、ゼロから作ることがなくなっていたからです。

そのため、数年前のCSS3の知識そのまんまで

divクラスをfloatにして組んだ後にclearして、という作業が display:box の1行で片付く

という有難いプロパティを駆使して作成したんですが、結果は段組みにならず。
現在は display:flex で指定するのが標準のようです。

やはり日本語サイトだけを確認するんじゃなくて、最新情報が反映されやすい英語サイトを利用しようと反省したしだいです。

英語サイトで分かりやすい思ったのは以下の3サイトです。

w3schools.com
WSCの公式サイトではなくWEB開発者のサイトですが、各種チュートリアルが非常に充実しています。

トップから「CSS Reference」をクリックすると、左メニューにCSSの一覧が表示されます。

英語のみですが、ブラウザのバージョンごとの対応状況（ベンダープレフィックスの有無）も記載されていますし、プロパティの「Play it」をクリックすると、視覚的に効果を確認できるので、理解しやすいです。

Can I Use…
モバイルを含めたブラウザごとの対応状況を一覧で確認できます。すでに「IE11」の次のバージョンに「Edge」が控えています。

プレフィックスが必要かどうかの目印（右上の黄色）が小さいのが難点。

Firefoxの開発元のサイトですが、他のブラウザの情報にも詳しいです。
ページによっては日本語化されていないのはご愛嬌。
該当するモジュールの勧告状況の確認もできます。

以上の3サイトを確認しながらフレキシブルなページを作り、Google Chromeの「デベロッパーツール」でモバイルでの見え方を確認し、いざアップロードしたところ、段組みにならず。

display:flex はCan I Useではスマホ対応って書いてありましたけど？
と思い別サイトも確認したところ、MDNではこのようになってました。

PCの各ブラウザで対応

モバイルは未対応だったのね

恐ろしや未勧告のCSS3。
そのうち対応するかもしれないし、逆に他のものがボツになるかもしれないし、毎回確認しなくちゃだわ。

なお、スマホでフレキシブルレイアウトにする件は、旧プロパティの display:box を指定して解決しました。

.dangumi {
    display:-webkit-box;
    display:-moz-box;
    display:box;
    display:-webkit-flex;
    display:flex;
}

.dangumi {

display:-webkit-box;

display:-moz-box;

display:box;

display:-webkit-flex;

display:flex;

}

後に記述された設定が優先されるので、PC用ブラウザはflex、flexが未対応のモバイルはboxが有効になります。