html – 在iOS上,flexbox无法正常工作(订购)

我有一个< ul>它有几个包含图像的列表项. < ul>在更宽的屏幕上水平显示但在移动设备上我显示列表项目的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;
}

我确实有浮动：左;在list-item上但是我收集flexbox不需要这个如果flex-flow：行换行设置…或者至少它不应该？

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

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

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

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

谢谢,期待您的回复！

解决方法

它不起作用,因为你在订单上缺少-webkit前缀,这在所有版本的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;}