IEでflex「align-items」が効かないときの対処法

おはようございます！社員Aです👩

そして、あけましておめでとうございます。

今日から仕事始めの方も多いかと思います。

今年もどうぞよろしくおねがいいたします。

さて、今回は私が製作中にハマってしまったIE対策。

IEでflexの中央揃えが効かないときの対処法をご紹介したいと思います。

モダンブラウザでは効いているのにIEではflexで中央揃えにならない！

Flexは今や主流になり、必ずWEB制作のときに使用するのですが、flexで中央揃えをしたときにIEで効かない現象にハマってしまいました。

Chromeなどのモダンブラウザでは問題なく動作しているのですが、IE11では中央揃えではなく上部揃えになってしまいます。

わかりやすく図にしてみました。

モダンブラウザでの表示

IE11での表示

IE11だと、縦方向に中央にならず上揃えになってしまいます。

このときのCSSは下記でした。

.box_area .box{
  background:#181818;
  color:#fff;
  text-align:center;
  width:32%;
  min-height:100px;
  align-items:center;
  display:flex;
  justify-content:center;
}

原因は、align-itemsとmin-heightの併用だった！

最終チェックの段階で上記現象にハマってしまい、かなり焦ったのですがよくよく調べてみると原因は「align-items」と「min-height」の併用で起きてしまうようでした。

この場合、「min-height」ではなく「height」を使うことでIE11でも中央揃えで表示することができました。

先程のコードを修正しました。

.box_area .box{
  background:#181818;
  color:#fff;
  text-align:center;
  width:32%;
  height:100px;
  align-items:center;
  display:flex;
  justify-content:center;
}

flex関連のIEバグは度々起きやすい

制作している中で感じるのがflex関連のIEバグは割と起きやすいという点です。

その度にググって対処しているのですが、正直IEだけのために対応しなければいけないというのは不便だなと感じます。

日本ではまだまだIEのシェアがありますし、これからもバグに立ち向かっていかなければならないフロントエンドの宿命だと思いますが、こうやって備忘録として残していきたいと思います。