tro-suke blog

display: boxとdisplay: flex

先々月、サイドバー固定でメインカラムを可変のレイアウトで、３カラムのテンプレートを 作成するとき、「display: box」を使用していました。そこで便利だったのが「box-ordinal-group」というもの。htmlコードに記述した順番に関係なく、表示さ せたい順番をスタイルシートで設定できるという、大変便利なものなのです。今回はそのことについて書こうと思っていたのですが、先日Flexible Boxについての最新の仕様は「display: box」ではなく「display: flex」だということを知りました。ということで「display: box」と「display: flex」について先に書いてみようと思います。ただし「display: flex」は、現在対応しているブラウザはGoogle Chromeのみという心もとない状況です。

では実際の状況はどうなのか、今作成中のテンプレートで試してみることにしました。テンプレートは、サイドバー固定でメインカラムを可変の３カラム レイアウトです。「display: box」の部分を「display: flex」に変更してみました。（テストしたブラウザは全てMac版です。）

Google Chromeは、問題なくＯＫ！

同じwebkit系でもSafariはダメ

Firefoxではメニューも可変に

Operaでは意図したレイアウトにならない

まずは現状で対応できているGoogle Chromeは、問題なくＯＫ！。サイドメニューは固定されたままメインカラムのみ可変になってくれます。同じwebkit系のSafariでも大丈夫か と思いきや、Safariでは全く機能していませんでした。Firefoxでは、サイドメニューもメインカラムと一緒に可変になってしまいます。 Operaでは、意図したレイアウトにはなってくれませんでした。

結局私がやりたかったことは、レスポンシブデザインとかではなく、単にメインカラムを可変の３カラムレイアウトを手軽に作りたかったのですが、中途 半端な知識であたふたしてしまったようです。以前も少し書いたことがありますが、作り手が思っている程、見る側は気にしていないのが現状で、これからも ずっとそうなんだと思います。

どの仕様が最新かということよりも、どうしたら同じように見えるか、それが一番制作者には大事なことで、利用者には当たり前のことですからね。

●今回の記事を書くにあたり下記のサイトを参考にさせて頂きました。
Web.fla
くらげだらけ