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は厄介ですね、、
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
categories