owned mediaウェブ制作に役立つコンテンツを発信中!

IE11でflexboxのアイテムがカラム落ちするときに使うmax-width

最終更新日: Update!!
最近はウェブサイトのレイアウト組みでflexboxがよく使われています。flexboxを採用することで簡単にレスポンシブ対応のカラムレイアウトが作成できるのですが、一部ブラウザですと、まだところどころにバグがあるようです、、   タイトルの通り、IEでflexboxを使った場合にアイテムがカラム落ちしレイアウトが崩れる場合に使えるテクニックです。   flexboxでレイアウトを組むときのアイテムにサイズを設定するときにはflex-basisのプロパティを使いますが、IE11の場合、box-sizingが効かないようです。なのでpaddingやborderを設定している場合はレイアウトが崩れてしまいます。   そこでflex-basisと同じ値のmax-widthを設定することで対応が可能です。サンプルのコードはこちら(一部省略)  
// HTML
<div class="flex-container">
   <div class="flex-item">
   </div>
   <div class="flex-item">
   </div>
   <div class="flex-item">
   </div>
</div>

// CSS
.flex-item {
   flex-basis: 33.3333%;
   max-width: 33.3333%;
}
  flex-basisではなくwidthプロパティでflexアイテムの幅を設定している場合は問題ありません。まだまだIE11は厄介ですね、、
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram