Step By Work

既存サイトのレスポンシブ化の際にflexboxを使いたい

上杉 洋 Hiroshi Uesugi

Date: 2016.12.20
Update: 2022.10.24

flexboxって便利ですよね!
上下中央揃えとか、横並びのボックスの均等揃えとかが簡単にできるので非常に助かります。

そんなのtableでやればいいんじゃない?という声もあるかと思いますが、私がWeb制作の勉強を始めたときには既にHTML5/CSS3がでていたこともあり、正直tableレイアウトへの理解が少ないし、なんでもかんでもtableレイアウトにすることは推奨されていない現状もあるので、flexboxを使用することができればコーディングが非常に楽になると思うのです。

特に既存のWebサイトをレスポンシブ化する場合なんかはflexboxを使えるとかなり楽にコーディング出来ると思います!

ただ、古いIEなどで対応していないためなかなか使用する機会がないのも事実です。

なので、せめてスマホの場合のみflexboxを使えないかと考え、スマホのブラウザのflexboxの対応状況について調べてみました。

対応ブラウザについて

とりあえずIE9以前は対応しておらず、IE10はベンダープレフィックスを使用して対応が可能なようです。
それ以外については問題なさそうです。

肝心のスマホのブラウザについてですが、iOS6.1以前Android4.3以前のブラウザではflexboxに対応していないようです。
しかし、boxというflexboxの古い仕様で記述すればよさそうです。

今後、flexboxがもっと広く使用されるようになることを願います。

参考サイト

下記のサイトを参考にさせていただきました!

http://scene-live.com/page.php?page=60