【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」は不要です。