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

CSS 2017.12.24

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

Tags: ,
最終更新日: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は厄介ですね、、

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?