Webページレイアウトの最終兵器 flex

Webページレイアウトの最終兵器 flex

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

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

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

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

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

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

display:flexorder=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では試していないからです。もしお持ちの方は僕の音楽ページで試してみてください(;’∀’) 右にメニュー、左に記事が書かれていたら成功です。

Share me!Share on Google+Share on FacebookTweet about this on TwitterShare on TumblrPin on Pinterest

コメントを残す

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