フレックスボックスがiPadとSafariで動作しない

Question

フレックスボックスをウェブサイトで使用しており、iPad Air、iPad 3、Safari PCでクラッシュします。

デザインとコードはこのcodepenに似ています。 http://codepen.io/anon/pen/xwJzEg/

display: flex; 
flex-wrap: wrap; 

これは、問題が発生し、それらのデバイス上でどのように見えるかです：

この問題を回避するにはどのように何かアドバイスを？

Answer 1

フレックスボックスのSafariブラウザのサポートを検討してください。

Safari 9は標準のflexプロパティをすべてサポートしていますが、Safari 8以上ではベンダープレフィックスを使用する必要があります。

あなたのコードにこの調整を行います。ここ

.container { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: -webkit-flex; /* NEW */ 
    display: flex; 
    -webkit-flex-wrap: wrap; /* NEW */ 
    flex-wrap: wrap; 
    font-family: "Open Sans"; 
} 

参照フレキシボックスブラウザのサポート：http://caniuse.com/#search=flexbox

をAutoprefixerの使用を検討してください。接頭辞

参照フレキシボックスのコードサンプルは：The Ultimate Flexbox Cheat Sheet

Answer 2

は、あなたが最初の子と最後の子のli要素のためのフレックス値を設定しようとしたことがありますか？フレックスコンテナのフレックスアイテムのどれもがフレックス値を持っていないと、iPadsが混乱することがあります。例：

.container li:first-child { 
    flex:1; 
    -webkit-box-flex:1; 
    -webkit-flex:1; 
} 
.container li:nth-child(4) { 
    flex:1; 
    -webkit-box-flex:1; 
    -webkit-flex:1; 
} 

Answer 3

回答で示唆したようにAutoprefixerを使用しました。

私はSASSを書くときにgulpを使ってこれを処理します。ここにはguideがあります。

ここでの回答は、接頭辞以外の接頭辞の前に接頭辞付きのプロパティを使用することを示唆しています。私は小さな訂正に同意します。

.container { 
    display: -webkit-flex; 
    -webkit-flex-wrap: wrap; 
    display: flex; 
    flex-wrap: wrap; 
} 

プレフィックス付き以外のプロパティを使用する前に、すべてのプレフィックス付きプロパティをリストする必要があります。 @Michael_B答えは私の意見では完璧ではありません。

私は人々がこれを役に立つと願っています。