先日遭遇したIE11のflexbox関連のバグをメモっておきます。周知のバグだと思いますが、自分で書くと脳に定着しそうだしw
バグの詳細
以下のように、flexショートハンド・プロパティのflex-basisにcalcを使って値を記述すると、IE11で機能しないため無視されてしまいます（IE10も同様）。
flex: 1 1 calc(25% - 1rem);対処法
IE11の場合は、以下のようにflexプロパティをロングハンドで記述すればなおります。
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(25% - 1rem);IE10に対応したい場合、flex-basisをautoにしてwidthでcalcを使うと良いらしいです（すみません、テストしてません）。
メモ
- Edgeでも同様のバグがあったそうですが修正されています。
- MS Edge Dev でIE10はダウンロードできないんですね。
- IE10は公式サポート終了してますし、もう対象から外しても良いですよね…
flexbox関連のバグの他の記事
さいごに
コーディングを一通り終えてIE11でページを確認した際にレイアウトがグチャってなってると結構萎えるんですよね。なので、こういう周知のバグは覚えておいて、対処済みのCSSをデフォルトで書けるようにしておくと良いですね。
flexbox関連のバグは他にもたくさんある ので、この際しっかり勉強して対処できるようにしておこうと思います。
Enjoy laying things out with flexbox!
2020年3月24日に公開され、2020年4月17日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。