blog上野谷根千界隈でまったりと暮らしているWeb系フリーランスの雑記ブログです。Webやフリーランス、グルメなどについてもしゃもしゃ書いてます。Update:2019/10/31こんにちは、katori@xxbicotです。IE11では、flexboxの子要素(flexアイテム)にposition:absoluteがかかっている要素があると、並び方がおかしくなるときがあります。毎回遭遇しては対応法を忘れてしまうので、備忘録用に対処法をいくつかまとめました。flexboxを使うとき必ずIE11で確認をabsoluteの子要素の領域が確保されてしまうまず、事象が発生するサンプルを作成してみました。IE11と他のブラウザでの表示をキャプチャで比較します。IE11以外の場合はこちら。次にサンプルのコード。3)を想定したものです。2が両端に置かれるはずです。2の右に空白ができてしまいました。この原因として、IE11ではabsolute要素は通常のflexアイテムとして扱ってしまうことにあります。3の領域)ができた、ということのようです。このサンプルはjustify-contentプロパティがspace-betweenの場合ですが、space-aroundでも位置ずれが発生するという事例も見かけました。justify-contentプロパティが怪しい動きをするとのこと。ちなみに、以前はFirefoxでも同様のバグが発生していましたが、2017年3月リリースのバージョンで修正されて、今はIE11だけで起きます。対処法についてflexアイテムの並び順を変えるabsolute要素がカウントされてもされなくても、影響がでない順番に並び替える方法です。2</div></div>このようにします。2を両端に置くことができます。orderプロパティでflexアイテムの並び順を指定する「文書構造上要素の順番を変えたくない」または「もうCSSコーディングが済んでいて今から順番変えると影響が出る」という場合はこれが一番おすすめ。orderはflex・gridコンテナの中で、アイテムを並べる順序を設定できるプロパティです。サンプルの場合、order:1を2番目の要素に設定します。2という順番になり、前述の「flexアイテムの並び順を変える」と同じように表示されます。orderプロパティ、あんまり使ったことなかったんですが、スタイルを1つ追加しただけでレイアウトを調整できるのは便利ですね!flexコンテナの外へ出すそもそも論ですが、この案を見かけて「確かに!」と思ったのでご紹介。flexコンテナからabsolute要素を外に出すという方法です。3(absolute)</div>他のflexアイテムと並列の関係にすべき要素なのか?と考えた時、もしそうでなければ外に出した方がよりセマンティックになる可能性も。コードを見直すいい機会かも知れませんね。noneなら問題ありません。́Д`)違うケースでは役立つかもしれないのでご紹介まで。IE11」と調べるとバグ報告がたくさんでてきますよね。コーディング中念の為チェックしなきゃなぁと思っていたんですが、今回のマークアップはよくある使い方のひとつだと思っていたので、ここでもバグが出るのか!とちょっと予想外でした。́ω`)一方で、コードに対する警告に関しては「確かにここは明示的に書いた方がいいよなぁ」という気づきも多々。IE11チェックは欠かせないですね。WORDPRESS(13)Profilekatori在宅フリーランスのWebデベロッパー(フロントエンドエンジニア、コーダー)です。東京の上野谷根千界隈でまったり仕事してます。