FlexboxをAndroid4.3以前の標準ブラウザにも対応させる方法

今どきAndroid 4.3？っていう気もしますが、案件によってはAndroid 4系の標準ブラウザも対応機種として含まれる場合もあるので、備忘録として記事にしておきます。

はじめに

なぜAndroid4.3以前の標準ブラウザではFlexboxが使えないのか

そもそもAndroid OS 4.3以前にプレインストールされている標準ブラウザと、Android OS 4.4以降の標準ブラウザは実体の違うアプリケーションとなっています。

Android OS 4.3以前の標準ブラウザは、Android OSの一部として開発されたwebkitベースのブラウザとなります。現在は開発を終了しています。

Android OS 4.4以降の標準ブラウザは、Chromeと同じくChromiumをベースとして制作されたブラウザに変わっていることが多く、互換性を保つために最低限の機能のみを実装されたものとなっています。

両者のブラウザの決定的な違いは、Android OS 4.4以降の標準ブラウザは、アプリケーション単体として開発されているので、最新のWeb技術やセキュリティに対するアップデートが行われるのに対し、Android OS 4.3以前の標準ブラウザはOSの一部として開発されているので、アプリケーション単体でのアップデートは行われず、バージョンをOSに依存しています。要するに、Android OS 4.3以前の標準ブラウザは、使えないものはいつまでたっても使えないという事になります。

Android4.3以前の標準ブラウザへの対応は必要なのか？

今現在のAndroid OSの最新バージョンが7系の中、Android OS 4.3以前の標準ブラウザへの対応の重要度は低いと思います。
個人サイトや個人ブログなどで気ままに運営している方は気にしなくても良いでしょうが、企業からの依頼でコーディングを行う場合は事前に対応機種の確認を取った方が無難でしょう。

書き方

Flexコンテナ

.flex{
    display: -webkit-box; /* Androidブラウザ用 */
    display: flex;
}

Flexカラム

.flx-column{
    -webkit-box-flex: 1;
    flex: 1 0;
}

justify-contentプロパティ

.flex-start{
    -webkit-box-pack: start; /* Androidブラウザ用 */
    justify-content: flex-start;
}

.flex-end{
    -webkit-box-pack: end; /* Androidブラウザ用 */
    justify-content: flex-end;
}

.flex-center{
    -webkit-box-pack: center; /* Androidブラウザ用 */
    justify-content: center;
}

.flex-space-between{
    -webkit-box-pack: justify; /* Androidブラウザ用 */
    justify-content: space-between;
}

※space-aroundに対応するプロパティは無し

align-itemsプロパティ

.flex-start{
    -webkit-box-align: start; /* Androidブラウザ用 */
    align-items: flex-start;
}

.flex-end{
    -webkit-box-align: end; /* Androidブラウザ用 */
    align-items: flex-end;
}

.flex-center{
    -webkit-box-align: center; /* Androidブラウザ用 */
    align-items: flex-center;
}

.flex-baseline{
    -webkit-box-align: baseline; /* Androidブラウザ用 */
    align-items: baseline;
}

.flex-stretch{
    -webkit-box-align: stretch; /* Androidブラウザ用 */
    align-items: stretch;
}

align-contentプロパティ

align-contentプロパティは使えません。