FlexBoxをAndroid4.3以前の標準ブラウザとiOS6.0以前のSafari、IE10にも対応させる方法。レスポンシブレイアウトに最適！

マルチデバイス対応＝レスポンシブ ではない！

マルチデバイス対応、レスポンシブレイアウトでのWeb制作はここ数年（ここ2,3年の事ですね。）ですでに当たり前のものとなってしまいました。
以前はスマホ対応をするかしないかをお客様に確認していましたが、現在では有無を言わさずのようです。

レスポンシブサイトはGoogle大先生が推奨しており、またワンソースですべてのデバイス（ガラケーを除く）に対応できる謳い文句からお手軽感をお持ちの方も多く、「マルチデバイス対応＝レスポンシブ」 の印象が強いですがそうではありません。マルチデバイス対応の中の構築法の一つとしてレスポンシブデザインがあります。

レスポンシブの構築は、従来から使われているフロートでのレイアウトにメディアクエリを加えての構築方法が主流でした。

この方法は、ある程度古いバージョンのブラウザでも対応可能です。
反面、デバイス幅によってレイアウトを変更せざるを得ないレスポンシブレイアウトには、フロート時のclearfixの使用に加えブレイクポイントでのフロート解除設定など煩雑なコーディング作業が必要でした。
デバイス、OSの違い、ブラウザのバージョンごとの表示確認作業など多くの時間を要していました。

レスポンシブレイアウトに親和性の高いFlexBox

以前よりフロートでの構築の他にもフレキシブルボックス「FlexBox」がありましたが、度重なる仕様の変更や、多くの古いWindows IE（IE6～IE9）が未対応、ブラウザ実装状況と設定方法の差異などで実践ではなかなか使用できるものではありませんでしたが、ここに来てある程度仕様が固まり、またWindows IE10までの古いIEブラウザのサポートが終了し、モダンブラウザもほぼ実装し、実践での使用にも充分耐えうる状況となってきました。

FlexBoxはレスポンシブレイアウトに大変親和性が高く、今後の主流となるものと思います。
FlexBox関連の記事は諸先輩方が詳しく説明されていますし、私も空で言えるほど完全に マスターしたわけでもないので内容に関してはそちらをご覧いただくとして、ここでは、古いブラウザにも対応できる方法をメモしたいと思います。Android4.3以前の標準ブラウザ、iOS6以前のSafari、そしてWindowsIE10へ対応してみます。

FlexBoxをAndroid4.3以前の標準ブラウザ、iOS6以前のSafari、そしてWindowsIE10へ対応

FlexBoxは今まで3度の大きな仕様変更がありました。
古いものからbox、flexbox、flexです。

※1　-webkit-box-lines: multiple;が草案のみでブラウザには実装されなかったため、一番古い仕様のboxでは子要素のwrap設定が出来ない。
※2　 flexbox仕様はIE10のみ。

CSS内に上記3種類をベンダープレフィクス付きで古いもの順に記述します。
それぞれのプロパティー横にコメントアウトで記したものが対応させるOSとバージョンです。
Safariに関しては今でもベンダーが必要のようです。

Flexコンテナ

.flex-container {
display: -webkit-box; /* before Android4.3 iOS6:Safari */
display: -ms-flexbox; /* IE10 */
display: -webkit-flex; /* Pc-safari */
display: flex;
-ms-flex-flow: row wrap; /* IE10 */
-webkit-flex-flow: row wrap; /* Pc-safari */
flex-flow: row wrap;
width:100%;
}

Flexカラム（均等配置）

.col {
-webkit-box-flex: 1; /* before Android4.3 iOS6:Safari */
-ms-flex: 1 1 0px; /* IE10 */
-webkit-flex: 1 1 0px;/* Pc-safari */
flex: 1 1 0px;
width: auto; /* before Android4.3 iOS6:Safari */
}

Flexカラム（レスポンシブ等のグリッドで横幅を％設定する場合など）

.col-50per {
-webkit-box-flex: 0; /* before Android4.3 iOS6:Safari */
-ms-flex: 0 0 50%; /* IE10 */
-webkit-flex: 0 0 50%; /* Pc-safari */
flex: 0 0 50%;
width:50%; /* before Android4.3 iOS6:Safari */
max-width: 50%; /* IE11*/
}

※この場合↑、IE11用にmax-widthを同じ値で指定しないと崩れる。

Android4.3以前標準ブラウザ・iOS6以前Safariを ワンカラムにするポイント設定

@media only screen and (max-width: 767px) {
.flex-container {
display: block; /* before Android4.3 iOS6:Safari */
display: -ms-flexbox;  /* IE10 */
display: -webkit-flex; /* Pc-safari */
display: flex;
}
}