Webページレイアウトの最終兵器 flex2016-01-08

長らくWebデザインをサボってると知らぬ間に技術はドンドン進みますねえ(‘◇’)ゞ

floatに代わる新たなマルチカラム作成手法だったはずの「display:box」は既に過去のものになってしまったようです。

flexでマルチカラムを実現する

切っ掛けは、例によってIEがなかなかdisplay:boxに対応しないので、何か良い方法は無いか探していた時です。意外にもdisplay:flexなるものにIE11は対応済みだと知りました。

display:flexはdisplay:boxと同様に親要素で規定し、子要素に対しては順序を示すプロパティ（flexの場合はorder）を設定すればそれに従って横に並ぶというものです。

もっとも、flexは文字通りさらに柔軟で、子要素を縦に並べたり位置を指定したりできるようですが、僕がやりたかったのは単純にメニューが右でその左に記事を表示するといった従来型のレイアウトでした。

でdisplay:flexとorder=1,2,3...でやってみると、確かにIEでもChromeでもちゃんと横に並ぶのですが、メニューに指定したwidthが無視されているようです。

そこでHTMLエディタで色々やってると、flexというプロパティ(displayの値ではない)があったので、その中のnoneという値を指定してみると（つまりflex:none;）上手くいきました(^▽^)/

display:flexのブラウザ別対応状況

さて、IE11と最新のChromeで有効だと確認できましたが、他のブラウザではどうでしょう？次のようは参考記事を元にブラウザ及びバージョン別の対応状況をまとめたものです。

IE9以前は仕方ないとして、その他のブラウザは大体対応しているようです。ただこの記事は2014年6月に書かれたので、今は更にバージョンが進んでます。

恐らく最新の状況によると、flexのプレフィックスで対応が必要なのはIE10、iOS-Safari8.4そしてAndroid標準ブラウザ4.3だけとなります。つまり；

display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /*previous Safari & Android browser*/
display: flex; /* other new browsers */

で大体事足りそうです。という事は子要素に対しては下記のとおりで行けそうです。

-ms-flex-order: 1;
-webkit-order: 1;
order: 1;

行けそうですというのは、まだIE10では試していないからです。もしお持ちの方は僕の音楽ページで試してみてください(;’∀’) 右にメニュー、左に記事が書かれていたら成功です。