Html flexbox在iOS上不工作（订购）

我有一个

，其中有几个列表项都包含一个图像。

在较宽的屏幕上水平显示，但在移动设备上，我以2乘2的方式显示列表项。最初我是用

float:left；宽度：50%在列表项上设置，效果很好。但由于图像是徽标，大小不一，所以我决定使用flexbox对列表项进行重新排序，以便图像的排列方式不同，看起来更整洁。我的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:leftflex-flow:row wrap
，则列表项上的code>，但我收集flexbox不需要此选项……或者至少不应该设置

上面的CSS在我的iMac浏览器、Firefox和Opera上运行良好。但在Safari和IOS（Safari）上，项目不会重新排序

我想这会在最新的浏览器上运行，尤其是webkit和iOS——有人能解释一下吗

这是正确工作时徽标的显示方式


这就是它们在Safari/iPhone上的显示方式——你可以看到顺序不同（错误——加价顺序）


谢谢，期待您的回复
 它不起作用，因为您缺少
订单
上的
-webkit
前缀，这在所有支持flexbox的Safari和iOS Safari版本中仍然是必需的。关于其他浏览器的前缀，请查看上的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;}

另外，我是否需要所有前缀，或者我可以只使用
-webkit
和默认显示属性？我听说也许
-ms
和
-moz
现在什么都不做了？同样，对于“订单”，所有的前缀版本都只是
-webkit-order
，
-moz-order
，
-ms-order
和
订单
？非常感谢，我确信我试过了，但没有成功-显然没有！我认为问题出在-webkit-box/-webkit-flex上。干杯