Flexbox nie działa (zamawianie) na iOS

Question

Mam <ul>, który ma kilka elementów listy zawierających obraz. <ul> wyświetla się poziomo na szerszych ekranach, ale na urządzeniu mobilnym wyświetlam 2 pozycję elementu listy 2. Pierwotnie zrobiłem to z ustawieniem float:left; width: 50%; na liście pozycji, która działała świetnie. Ale ponieważ obrazy są logami i różnymi rozmiarami, nie wyglądały dobrze, więc zdecydowałem się użyć flexbox do zmiany kolejności elementów na liście, aby obraz był inny i wyglądał bardziej schludnie. Moje CSS jest poniżej:

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; 
} 

miałem float:left; na liście-elementu, ale wnoszę schematu flexbox nie potrzebuje tego, jeśli flex-flow: row wrap jest ustawiony ... a przynajmniej nie powinna?

Powyższy CSS działa poprawnie na moim iMacu w Chrome, Firefox i Operze. W Safari i na IOS (Safari) elementy nie są zamieniane.

Pomyślałem, że to zadziała na najnowszych przeglądarkach, zwłaszcza na webkitach i iOS - czy ktoś może rzucić trochę światła na to?

ten sposób logo powinien wyświetlać gdy działa poprawnie ...

A to w jaki sposób wyświetlić na Safari/iPhone - można zobaczyć kolejność jest inna (źle - zlecenie z dopłaty) ...

dzięki, czekam na odpowiedź!

Answer 1

To nie działa, ponieważ jesteś brakuje -webkit prefiks order, który nadal jest wymagane we wszystkich wersjach iOS Safari Safari & obsługujących schematu flexbox. W odniesieniu do prefiksów dla innych przeglądarek, spójrz na tabelę wsparcia dla flexbox na caniuse.

Aktualizacja kodu:

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;}