iOSでフレックスボックスが動作しない（注文）

Question

私は<ul>を持っています。これにはすべて画像を含むいくつかのリスト項目があります。 <ul>は広い画面に水平に表示されますが、モバイルではリスト項目の2を2で表示しています。元々はこれを、リスト項目に設定したfloat:left; width: 50%;で行いました。しかし、画像はロゴであり、大きさが違うので、正しく見えなかったので、フレックスボックスを使用してリストアイテムを並べ替えることにしました。私のCSSは以下の通りです：

ul { 
    overflow: hidden; 
    display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */ 
    display: -moz-box;  /* OLD: Firefox (buggy) */ 
    display: -ms-flexbox; /* MID: IE 10 */ 
    display: -webkit-flex; /* NEW, Chrome 21?28, Safari 6.1+ */ 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    -moz-flex-flow: row wrap; 
    -ms-flex-flow: row wrap; 
    flex-flow: row wrap; 
} 

li { 
    display: block; 
    margin: 0 0 @baseline/2 0; 
    padding: 0; 
    text-align: center; 
    width: 50%; 
} 

li:nth-child(1) {order: 1;} 
li:nth-child(2) {order: 2;} 
li:nth-child(3) {order: 4;} 
li:nth-child(4) {order: 3;} 
li:nth-child(5) {order: 5;} 
li:nth-child(6) {order: 6;} 
li:nth-child(7) {order: 7;} 

li:last-child { 
    clear: left; 
    float: none; 
    margin: 0 auto; 
} 

私は、リスト項目の上float:left;を持っていなかったが、私はflex-flow: row wrapが設定されている場合フレキシボックスはこれを必要としません集まる...あるいは少なくともそれがいけませんか？

上記のCSSは、Chrome、Firefox、OperaのiMacで正常に動作します。 SafariとIOS（Safari）では、項目の順序が変更されません。

これは最新のブラウザ、特にWebkitとiOSでうまくいくと思っていました。

これが正しく動作したときにロゴが表示されるべきかである

...

そして、これは彼らがサファリ/ iPhone上で表示する方法である - 順序 - あなたは順序が違う（間違っている見ることができますマークアップ）の...

おかげで、あなたの応答を楽しみにしています！

Answer 1

それでもフレキシボックスをサポートするSafariの&のiOSのSafariのすべてのバージョンで必要とされるorderに-webkitプレフィックスを、欠けているので、それは働いていません。他のブラウザ用のプレフィックスについては、caniuseのflexboxのサポートチャートをご覧ください。

にあなたのコードを更新します。

li:nth-child(1) {order: 1; -webkit-order: 1;} 
li:nth-child(2) {order: 2; -webkit-order: 2;} 
li:nth-child(3) {order: 4; -webkit-order: 4;} 
li:nth-child(4) {order: 3; -webkit-order: 3;} 
li:nth-child(5) {order: 5; -webkit-order: 5;} 
li:nth-child(6) {order: 6; -webkit-order: 6;} 
li:nth-child(7) {order: 7; -webkit-order: 7;}