【IE11】flexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならない【解決方法】

  • このエントリーをはてなブックマークに追加

IE11でflexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならないという現象が発生します。

元のコード

HTML


CSS


DEMO

これを参考に修正していきます。


解決方法

解決には高さ指定をIEのみ通常のheightで指定したりtable要素にしたり…等色々あります。
が、flex要素をさらにflex要素で囲むと解決します。


修正したコード

HTML


CSS


flexWrapを追加して、そこにdisplay: flex;を指定しました。
これで解決します。

あまりIE以外で無駄にflexを付けたくない、という場合はIEハックを付けましょう。



DEMO

はやくIEに悩まされないようになりたいですね…
それでは

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。