flexbox không hoạt động (đặt hàng) trên iOS

Question

Tôi có một số <ul> có nhiều mục danh sách chứa tất cả hình ảnh. Màn hình <ul> hiển thị theo chiều ngang trên màn hình rộng hơn nhưng trên thiết bị di động, tôi hiển thị danh sách 2 mục bằng 2. Ban đầu tôi đã làm điều này với float:left; width: 50%; đặt trên danh sách các mục hoạt động tuyệt vời. Nhưng vì hình ảnh là logo và tất cả các kích cỡ khác nhau, nó không nhìn đúng, vì vậy tôi quyết định sử dụng flexbox để sắp xếp lại danh sách các mục nên hình ảnh được sắp xếp khác nhau và trông gọn gàng hơn. CSS của tôi là dưới đây:

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

tôi đã có float:left; thuộc danh mục nhưng tôi thu thập flexbox không cần điều này nếu flex-flow: row wrap được thiết lập ... hoặc ít nhất nó không nên?

CSS ở trên hoạt động tốt trên iMac của tôi trong Chrome, Firefox và Opera. Trong Safari mặc dù và trên iOS (Safari) các mục không được sắp xếp lại.

Tôi nghĩ điều này sẽ hoạt động trên các trình duyệt mới nhất, đặc biệt là webkit và iOS - bất kỳ ai cũng có thể làm sáng tỏ điều này?

Đây là cách các biểu tượng sẽ hiển thị khi làm việc một cách chính xác ...

Và đây là cách chúng hiển thị trên Safari/iPhone - bạn sẽ nhìn thấy đặt hàng là khác nhau (sai - trật tự của mark-up) ...

Cảm ơn, mong được trả lời của bạn!

Answer 1

Không hoạt động vì bạn thiếu tiền tố -webkit trên order, vẫn được yêu cầu trong tất cả các phiên bản Safari & iOS Safari hỗ trợ flexbox. Đối với tiền tố cho các trình duyệt khác, hãy xem biểu đồ hỗ trợ cho flexbox trên caniuse.

Cập nhật mã của bạn để:

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