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

公開日:2016/12/20 更新日:2020/02/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

上杉 洋

1991年生まれ。株式会社ステップバイワーク代表。2013年からホームページ制作の業界に入り、以後フリーランスを経て2022年に起業。 独自の理論で費用対効果の高いホームページを作るため日々精進しています。