IE11でflexboxのアイテムがカラム落ちするときに使うmax-width
最近はウェブサイトのレイアウト組みで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は厄介ですね、、categories
- WordPress（61）
- JavaScript（49）
- Vue.js（48）
- CSS（46）
- jQuery（34）
- Nuxt.js（22）
- Sass（21）
- Gulp（17）
- webpack（16）
- PHP（14）
- HTML（14）
- GSAP（11）
- React（10）
- Vite（9）
- Pug（9）
- Laravel（8）
- Cordova（8）
- Linux（7）
- Next.js（6）
- Apache（5）
- Shopify（4）
- REST API（4）
- Node.js（4）
- Smarty（3）
- Git（3）
- JSON（3）
- その他プログラミング（3）
- Google Apps API（3）
- Bootstrap（3）
- 環境構築・システム（3）
- TypeScript（2）
- EJS（2）
- RMS（2）
- Docker（2）
- Instagram API（2）
- Excel VBA（2）
- SVG（1）
- Dart（1）
- ECカートASP（1）
- Markdown（1）
- AMP（1）
- Nginx（1）
- XML（1）
- shellscript（1）
- Ruby（1）
- MySQL（1）
