1. HOME
  2. テックブログ
  3. 【flexbox】flex-direction:columnで起こるIE 11のレイアウトバグに対応する

【flexbox】flex-direction:columnで起こるIE 11のレイアウトバグに対応する

レスポンシブデザインが主流となり、コンテンツの並び方向や出現順をCSSだけで簡単に変更できることからflexboxを使用することが多くなっています。

しかしIE11にも対応させる必要がある場合は頻繁にレイアウトバグが起こるため実装には注意が必要です。

バグの種類は多岐にわたりますが、今回は「flex-direction:column」や「flex-direction:column-reverse」を使用した際に起こるレイアウトバグの発生原因とその修正方法を紹介します。

想定するレイアウト

3列のボックス(flexコンテナー)があり、それぞれイメージ・テキスト・リンクの各アイテムを配置するとします。

リンクアイテムを下付きで配置したいので、テキストアイテムをイメージとリンクアイテム以外の隙間をすべて埋める形で、すべてのテキストアイテムの高さが同じになるようなレイアウトを想定します。

テキストアイテムの高さはflexのショートハンドプロパティ「flex:1」を使って揃えることとします。

サンプルでは表示エリアを確認するため、各コンテナーとアイテムに背景色を設定しています。

またimgはインライン要素であり、デフォルトCSSでは「vertical-align: baseline」が設定されることが原因で画像の下に予期せぬ隙間が空いてしまいます。それを解消するためbaseline以外の値(ここではvertical-align: middle)を予めセットしておきます。

Edge・Chrome・Firefox・Safariでは、想定どおりのレイアウトが実現できます。

ですがIE11で表示を確認するとレイアウトが崩れてしまっています。

ひとつは画像下に隙間ができているのと、flex:1を設定したテキストアイテムの高さが0になってしまい潰れてしまっているのがわかります。

IE11でのレイアウト崩れを解消する方法

画像の下にできた隙間部分

イメージアイテムにmin-heightプロパティを追加し、値に0(px)以外を設定することで解消できます。今回は「min-height: 0%」を設定しました。

flex:1を設定したブロックの高さが潰れた部分

flexショートハンドプロパティは、「1.flex-growの値 2.flex-shrinkの値 3.flex-basisの値」を一括指定するために使用されます。

「flex: 1」という指定方法は、固定サイズのアイテム以外の空きスペースをすべて埋めたい場合に使用されます。

単位のない数値を一つだけ設定した場合、flex-growプロパティを指定したとみなされ「flex: 1 1 0」と解釈されます。(flex-shrinkには1、flex-basisには0の値がデフォルトでセットされます)

flex-growプロパティはflexコンテナー内の残りの空間のうち、どれだけのスペースがそのアイテムに割り当てられるか (flex伸長係数) を設定するプロパティです。

通常はこの設定で問題ありませんが、IE11の場合flex-directionにcolumn(またはcolumn-reverse)が指定されている場合、flex-growが無視されてしまうバグがあり、flex-basisだけが評価されてしまうため高さが0となりアイテムが潰れてしまいます。

ショートハンド内の flex-basis プロパティに auto を追加で指定することで、flexアイテムの内容に合わせて自動的に高さが指定できるようになります。

変更したコードはこちらです。

これですべてのブラウザで意図したとおりのレイアウトになることが確認できました。

アイテムの高さが必要ない場合

テキストアイテムの高さが必要なくただ単にリンクアイテムを下付きにだけすれば良い場合は、テキストアイテムに「margin-bottom: auto」をによって空きスペースいっぱいにmarginを取ることで実現できます。

この場合「flex: 1 auto」は不要です。

ファブリカコミュニケーションズで働いてみませんか?

あったらいいな、をカタチに。人々を幸せにする革新的なサービスを、私たちと一緒に創っていくメンバーを募集しています。

ファブリカコミュニケーションズの社員は「全員がクリエイター」。アイデアの発信に社歴や部署の垣根はありません。

“自分から発信できる人に、どんどんチャンスが与えられる“そんな環境で活躍してみませんか?ご興味のある方は、以下の採用ページをご覧ください。

◎ 新卒採用の方はこちら
◎ キャリア採用の方はこちら

この記事を書いた人

奥村
IS事業本部 デジタルマーケティング事業部 デザインチーム
奥村

おすすめの記事