我有一个< 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;}
