facebooktweetはてブLINEPocketfeedlyおはようございます!社員Aです👩そして、あけましておめでとうございます。今日から仕事始めの方も多いかと思います。今年もどうぞよろしくおねがいいたします。今回は私が製作中にハマってしまったIE対策。IEでflexの中央揃えが効かないときの対処法をご紹介したいと思います。くじモダンブラウザでは効いているのにIEではflexで中央揃えにならない!原因は、align-itemsとmin-heightの併用だった!flex関連のIEバグは度々起きやすいモダンブラウザでは効いているのにIEではflexで中央揃えにならない!Flexは今や主流になり、必ずWEB制作のときに使用するのですが、flexで中央揃えをしたときにIEで効かない現象にハマってしまいました。Chromeなどのモダンブラウザでは問題なく動作しているのですが、IE11では中央揃えではなく上部揃えになってしまいます。わかりやすく図にしてみました。モダンブラウザでの表示IE11での表示IE11だと、縦方向に中央にならず上揃えになってしまいます。このときのCSSは下記でした。.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{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のシェアがありますし、これからもバグに立ち向かっていかなければならないフロントエンドの宿命だと思いますが、こうやって備忘録として残していきたいと思います。フロントエンドエンジニア・デザイナーの社員Aです。更新頻度が多いかと思います。このブログのテーマも作成しました。一人旅がだいすきで、特に東南アジアを周っています。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。MAX】2018年10月19日10今話題のLINEのオープンチャットとは?実際に参加してみた2019年09月11。