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で有効だと確認できましたが、他のブラウザではどうでしょう?次のようは参考記事を元にブラウザ及びバージョン別の対応状況をまとめたものです。
ブラウザ | バージョン | 記述方法 |
---|---|---|
PC版Chrome | 4~20 | display:-webkit-box |
21~27 | display:-webkit-flex | |
28以降 | display:flex | |
PC版Firefox | 2~21 | display:-moz-box |
22以降 | display:flex | |
PC版Internet Explorer | 9以前 | 非対応 |
10 | display:-ms-flexbox | |
11以降 | display:flex | |
PC版Safari | 3.1~6.0 | display:-webkit-box |
6.1以降 | display:-webkit-flex | |
iOS版Safari | 3.2~6.1 | display:-webkit-box |
7~ | display:-webkit-flex | |
Android版Chrome | 35? | display:flex |
Android標準ブラウザ | 2.1~4.3 | display:-webkit-box |
4.4 | display:flex |
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では試していないからです。もしお持ちの方は僕の音楽ページで試してみてください(;’∀’) 右にメニュー、左に記事が書かれていたら成功です。