flexbox 在 iOS 上不起作用（排序）

Question

我有一个<ul>，它有几个列表项都包含一个图像。 <ul> 在更宽的屏幕上水平显示，但在移动设备上我显示列表项的 2 x 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 不需要这个......或者至少它不应该？

上面的 CSS 在我的 iMac 的 Chrome、Firefox 和 Opera 上运行良好。但在 Safari 和 IOS (Safari) 中，项目不会重新排序。

我认为这可以在最新的浏览器上运行，尤其是 webkit 和 iOS - 任何人都可以对此有所了解吗？

这是徽标在正常工作时应显示的方式...

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

谢谢，期待您的回复！

Answer 1

它不起作用，因为您缺少 order 上的 -webkit 前缀，在所有支持 flexbox 的 Safari 和 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;}