flexbox在iOS上无法正常工作（订购）

Question

我有一个<ul>，其中包含多个包含图片的列表项。 <ul>在更宽的屏幕上水平显示，但在移动设备上我会显示列表项2的2.最初，我在列表项上设置float:left; width: 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:left;但是如果设置了flex-flow: row wrap，我认为flexbox不需要这个...或者至少它不应该是＆＃39}。吨？

上述CSS在我的iMac Chrome，Firefox和Opera中运行良好。在Safari和IOS（Safari）中，这些项目不会重新排序。

我认为这适用于最新的浏览器，尤其是webkit和iOS--有谁可以对此有所了解？

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

这就是他们在Safari / iPhone上显示的方式 - 你可以看到订单不同（错误 - 标记的顺序）......

谢谢，期待您的回复！

Answer 1

它无效，因为您错过了-webkit上的order前缀，这在所有版本的Safari＆amp;支持flexbox的iOS Safari。关于其他浏览器的前缀，请查看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;}