Flexboxはまだ新しい規格なので、ブラウザによって対応状況が異なっているようですね。 最新のブラウザを使ってればそれほど酷く崩れることは無いと思いますが、例によってマイクロソフトは独自路線を行く傾向は相変わらずで、IEだと問題が起きやすいようで? それはともかく。Flexboxを使ってレイアウトをしていて、ふと疑問が・・・非対応ブラウザだとどんなふうに見えるんでしょ? いまさら古いブラウザも手に入らないですし、古いブラウザでの見え方をチェックできるサイトも昔はあったような気がするのですが、今は検索してもすぐには見つかりませんね。 可能な範囲でいくつかのブラウザや環境で試してみましたが、非対応の環境はありませんでした。 さて、非対応だとどんな風に見えるのか・・・?確認はできませんが、推測してみました。
非対応のタグが使われていると、ブラウザはどうするか?⇒無視されるだけですよね。 つまり、Frexboxの使われたHTMLを、Frexboxのタグをまったく解釈できないブラウザは、多分無視してしまうわけですよね。 つまり、Frexboxのタグを全部消した状態と同じになるのでは? ということでやってみました。 まずは、Frexboxでレイアウトを作ってみる。
TEST1
TEST2
TEST3
TEST4
TEST5
TEST6
このCSSから、Frexboxに関するスタイルをすべて削除すると・・・
TEST1
TEST2
TEST3
TEST4
TEST5
TEST6
もういっちょ
あ
いう
えおか
き
く
け
こ
く
け
こ
さ
しすせそ
たちつてと
たちつてと
なにぬ
ねの
はひふへほ
まみむめも
やゆよ
ん
やゆよ
ん
Frexboxを削除すると・・・
あ
いう
えおか
き
く
け
こ
く
け
こ
さ
しすせそ
たちつてと
たちつてと
なにぬ
ねの
はひふへほ
まみむめも
やゆよ
ん
やゆよ
ん
なるほど、そりゃそうですね(^^;)
固定幅の3カラムだとどうなるか?
TEST1
TEST3
TEST4
TEST4
TEST4
TEST4
TEST4
TEST4
TEST4
TEST4
TEST4
TEST5
TEST6
Flex削除 ↓
TEST1
TEST3
TEST4
TEST4
TEST4
TEST4
TEST4
TEST4
TEST4
TEST4
TEST4
TEST5
TEST6
なるほど。。。
コメント