-webkit-flexがAndroidで正しく表示されない

Question

display:flexという素晴らしい機能を実現した後、WindowsのChrome 26から見たときの見た目を正確に見せたWebページを作成しました。ただし、AndroidのChrome 26では動作しません。エミュレータのAndroidブラウザ4.1では動作しません。 caniuseによれば、これらのブラウザはすべてサポートする必要があります。

おそらく偶然、Androidで表示される方法は、私が以前のバージョンdisplay:boxに切り替えると、同じように表示されます。

私の質問があり、私はこれらのクロスデバイスの問題を防ぐことができる方法：ここでは

は、それがAndroidの対Windowsでどのように見えるのですか？たぶんフレックス以外のものを使うと、もっと標準的になるでしょう。フレックスを使用しない、またはAndroid上で動作する実例を誰にでも教えてもらえますか？これは、モバイルWebアプリ向けです。どんな助けでも大歓迎です。私のコードへのリンクは以下の通りです。 -webkit-Flexで

：JSFiddleボックスで

：JSFiddle

Answer 1

好奇心をそそる人たちのために、フレックスを使用しないようにコードを完全に書き直しました。ここに私の目的のためにうまく動作するJSFiddleへのリンクがあります。 http://jsfiddle.net/8juSk/

@cimmanonが提案するようにboxとbox-ordinal-groupを使用しています。

Answer 2

の注意すべき異なる特性/値の3つのフレキシボックスのドラフトがあります。 Caniuseは、現在のドラフト（「サポート」）をサポートしているブラウザと古いドラフトのいずれかをサポートしているブラウザ（「部分サポート」）のみを区別します。

ブラウザのサポートを最大限にするには、古いものから最新のものまですべてを含めるだけです。

.foo { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 

.bar { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
} 

現在のところ、すべてのAndroidバージョンで古い2009プロパティがサポートされていますが、今後は標準プロパティを優先して削除される可能性があります。また、Blackberry 10は、古いドラフトではなく、現在の標準をサポートするものとしてリストされています。