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;列表项目,但我收集flexbox不需要这个如果flex-flow: row wrap设置...或至少它不应该？

上面的CSS在我的iMac Chrome,Firefox和Opera中运行良好.在Safari和IOS(Safari)中,这些项目不会重新排序.

我认为这适用于最新的浏览器,特别是webkit和iOS - 任何人都可以对此有所了解吗？

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

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

谢谢,期待您的回复!

Answer 1

它不起作用,因为你错过了-webkit前缀order,这在支持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;}